Center an element - CSS: Cascading Style Sheets 编辑

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

Download this example

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.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

align-items

BCD tables only load in the browser

justify-content

BCD tables only load in the browser

Resources on MDN

• Box Alignment in Flexbox
• CSS Box alignment guide