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


To place an item into the center of another box horizontally and vertically.


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.


BCD tables only load in the browser


BCD tables only load in the browser

Resources on MDN