How To #Center a Div
▻https://www.joshwcomeau.com/css/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.
#css