Center

Center the child or the group of children horizontally and vertically.

Under the hood, it uses a flex container with justify and align to center the inner content.

vertical-centering and height

Vertical centering will only have an effect if Center's height is bigger than the inner-content.

width.

The container spreads horizontally (width: auto). It compacts its children to max-content, then centers them horizontally.

We can prevent compaction by setting the group of children to width: 100%. In this case, we lose horizontal centering.