01Vertical Centering
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Before Flexbox, vertical centering was hard. Now, with modern CSS, it's just a couple of lines. We'll explore that in the next batch!
?Frequently Asked Questions
Why won't my image center with `margin: 0 auto`?
An `<img>` is an inline element by default. `margin: auto` only works on block elements. To fix this, either set `display: block` on the image, or apply `text-align: center` to the image's parent container.
How do I vertically center an element?
In classic CSS, vertical centering was notoriously difficult. You had to use line-height hacks or absolute positioning with transforms. Today, the standard way is to use Flexbox (`align-items: center`) or CSS Grid (`place-items: center`) on the parent.
Does `text-align: center` affect child elements?
Yes, `text-align` is an inherited property. If you center a parent `<div>`, all text inside its child elements will also be centered unless you explicitly reset it on the children.
