Why won't my image center with `margin: 0 auto`?

An ` ` 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 ` `, all text inside its child elements will also be centered unless you explicitly reset it on the children.

Why won't my image center with `margin: 0 auto`?

An ` ` 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 ` `, all text inside its child elements will also be centered unless you explicitly reset it on the children.