Center

A utility component that "CenterCenters" the child or children.

In effect it is by default a div with display:flex, set with:

• justify-content: center
• align-items: center

vertical-centering and height.

To activate vertical centering of the inner content, we must set the Center's height as bigger than the inner content.

width of the center element

As a regular div, it occupies the whole parent's width unless limited in width. It does not center itself, (that would be container) only it's inner content.