Center an element

在此页

要求
Recipe
Choices made
浏览器兼容性
Resources on MDN
相关话题

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.

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.

浏览器兼容性

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

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Flex Layout	Chrome 完整支持 52 完整支持 52 部分支持 29 注意事项注意事项 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. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 12	Firefox 完整支持 20 注意事项完整支持 20 注意事项注意事项 Multi-line flexbox has been supported since Firefox 28. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 不支持 18 — 20 Disabled Disabled From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11 注意事项完整支持 11 注意事项注意事项 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 .	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 52 完整支持 52 部分支持 4.4 注意事项注意事项 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. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 完整支持 52 完整支持 52 部分支持 29 注意事项注意事项 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. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 20 注意事项完整支持 20 注意事项注意事项 Multi-line flexbox has been supported since Firefox 28. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 不支持 18 — 20 Disabled Disabled From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 6.0 完整支持 6.0 部分支持 2.0 注意事项注意事项 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 Samsung Internet 6.0. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
Supported in Grid Layout	Chrome 完整支持 57	Edge 完整支持 16	Firefox 完整支持 52	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 52	Firefox Android 完整支持 52	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.2

图例

完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

justify-content