No longer needing to use negative margins or exact divisions of width and heights, we love how flexbox allows us to very quickly center elements vertically and horizontally.

  .centered_content {
    display: flex;
    justify-content: center;
    align-items: center;
}

But if you are trying to get a bunch of things centered on top of one another, just add position: absolute to the contained elements and they simply stack!

  .centered_content {
    display: flex;
    justify-content: center;
    align-items: center;

    > * {
        position: absolute;
    }
}

Happy stacking like a pro!

Example pen: https://codepen.io/varystrategic/pen/jpovVw


860 0 16