Center an element
In this recipe you will see how to center one box inside another. Centering both horizontally and vertically was difficult before flexbox, with the Box Alignment properties it is now straightforward.
Requirements
To place an item into the center of another box horizontally and vertically.
Recipe
Choices made
To center one box inside another we make the containing box a flex container. Then set align-items
to center to perform centering on the block axis, and justify-content
to center to perform centering on the inline axis.
In the future we may be able to center elements without needing to turn the parent into a flex container, as the Box Alignment properties used here are specified to apply to block layout too. However, support is currently limited for box alignment properties on block layout, so currently centering using Flexbox is the most robust way to achieve this.
Browser compatibility
css.properties.align-items
BCD tables only load in the browser
css.properties.justify-content
BCD tables only load in the browser