Why is there no "centered" container?

[masbaehr]

It would be very useful to have an extra container to show a message at the center of the screen.
It could be implemented very easily by doing the following:

<div class="notification-container-center-center">

.notification-container-center-center {
    transform: translateX(-50%);
    top: 50%;
    left: 50%;
}

[teodosii]

For a very simple reason - it doesn't behave properly for more than 1 notification. When you add a 2nd notification you'll see a sloppy movement because the container gets bigger and needs to be repositioned - BY browser. On the other hand, if we use only:

.center {
  top: 50%;
  left: 50%;
}

Further notifications will not be centered anymore, only the first.

[teodosii]

Hence this is the reason it doesn't exist.

[masbaehr]

Well to be honest this would be the developer's problem if he chooses to use this. It is merely meant for single short-lived notifications for example like "Access denied" or "OK" - especially where there will never be the case of more than one notification.

[teodosii]

Indeed, it might be helpful in some cases. Will let it open and will get implemented together with the remaining issues.

[teodosii]

I've added center container in 2.4.0. Also updated top and bottom containers as they were blurred when being animated due to Chrome treating transforms when animating.

[overcache]

@teodosii why not publish to npmjs?

[teodosii]

@icymind Apparently I forgot to publish, now should be available.

[masbaehr]

Thanks again for having implemented this!

I noticed however that the container isn't exactly centered, but a bit off (upper side has more white space than bottom side). You'll notice it especially when the screen is 4:3. For example on iPad in portrait mode.