• How To #Center a Div

    Before we wrap up, let’s summarize what we’ve learned by building a sort of decision tree, so that we can figure out when to use which method.

    – If we want to horizontally center a single element without disturbing any of its siblings, we can use the Flow layout auto margin strategy.
    If we have a piece of floating UI, like a modal or a banner, we can center it using Positioned layout and auto margins.
    – If we want to center a stack of elements one on top of the other, we can use CSS Grid.
    – If we want to center text, we can use text-align. This can be used in conjunction with any of the additional methods.

    Finally, in most other situations, we can use Flexbox. It’s the most versatile method; it can be used to center one or multiple children, horizontally and/or vertically, whether they’re contained or overflowing.