Center an element

In this recipe you will see how to center one box inside another.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supported in Flex Layout

52

291

21 -webkit-

12

12 -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

11512.17 -webkit-
Supported in Grid Layout571652 ?4410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Supported in Flex Layout

52

291

21 -webkit-

52

291

25 -webkit-

Yes

Yes -webkit-

202

49 -webkit-

18 —?3

48 -webkit- 4

12.17 -webkit- ?
Supported in Grid Layout5752 Yes524410.36.2

1. Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

2. Multi-line flexbox has been supported since Firefox 28.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.

justify-content

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supported in Flex Layout

52

291

21 -webkit-

12

12 -webkit-

202

18 —?3

49 -webkit-

48 -webkit- 4

1112.19
Supported in Grid Layout571652 ?4410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Supported in Flex Layout

52

291

21 -webkit-

52

291

25 -webkit-

Yes

Yes -webkit-

?12.1 ? Yes
Supported in Grid Layout5752 Yes524410.36.2

1. Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

2. Before Firefox 27, Firefox supported only single-line flexbox.

3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Resources on MDN

Document Tags and Contributors

Contributors to this page: chrisdavidmills, rachelandrew
Last updated by: chrisdavidmills,