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.

an element centered inside a larger box

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

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

align-items

BCD tables only load in the browser

justify-content

BCD tables only load in the browser

Resources on MDN