Center

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

Under the hood, it uses a flex container that justify and align the group of children to the center.

vertical-centering and height

Vertical centering will only come into play if Center's height is bigger than the inner content.

horizontal-centering and width.

The container flex spreads horizontally (width: auto), but compacts its children to max-content. We can prevent compaction by setting the group of children to width: 100%.