Center toastr notifications within a div

Question

I'm trying to get my toastr notification to show up in the middle of a div. I've seen some suggestions, like this one, but it's centering based on the overall window, and not within a div.

Is it possible to center a toast notification within a form element, when toastr knows nothing about the elements on a form?

My latest attempt was to roughly center the toast within the page, but I'd like to center it within a certain div. Is that possible? If so, how?

This is my centering attempt:

.toast-center {
    top: 50%;
    left: 40%;
}

Answer 1

You can try to create a new div and position it in the center of your expected div.

Then you can use positionClass option of toastr which is the location for your notification to popup

toastr.options: {
    "positionClass": "your-newly-created-div-class"
}