Centering "toasts"

[jaredcwhite]

I love the alert and toast stack functionality, but one UX pattern I've noticed lately is a lot of people are centering toasts and keeping them as simple as possible. So I'm going in that direction too on a recent project—but one thing that initially stumped me was how to center toasts. This little bit of CSS seems to work fairly well for me:

@media (min-width: 28rem) {
  .sl-toast-stack {
    left: 50%;
    margin-left: -14rem;
  }
}

If you can think of any better way to do this, I'm all ears!

I'm also putting the toast stack under my fixed navbar, so I'm using this as well:

.sl-toast-stack {
  top: 3.4rem;
}

It's the little things that make a design feel simple yet sophisticated. :)

[KonnorRogers]

@jaredcwhite when centering absolute positioned items I sometimes like to add the following as well:

.sl-toast-stack {
  transform: translate(-50%, -10%);
  /* same as translateX(-50%) translateY(-10%) */
}

which can help smooth out issues with having to use margin values like above.

[jaredcwhite]

TIL the translate percentage calculates based on the element width. That's really cool!!