居中一个元素

在这份指南中你将了解到把一个盒子居中放置在另一个之中的方法。在伸缩盒子模型(flexbox)出现之前,要做到同时垂直与水平居中是很困难的,而现在利用盒子对齐属性(Box Alignment)就很直截了当了。

an element centered inside a larger box

需求

把一个项目同时垂直与水平居中地放置在一个盒子中

指南

做出选择

要将一个盒子居中放置在另一个之中,我们需要让作为容器的盒子变成伸缩容器。再将 align-items 设置为 center 来实现块方向的轴(block axis)上的居中,并把 justify-content 设置为 center 来实现文字方向的轴(inline axis)上的居中。

将来我们可能不需要将父容器设置为伸缩容器就可以居中元素,因为此处使用的“盒子对齐”属性也被指定为适用于块布局。然而,当前在块布局上对盒子对齐属性的支持仍然是有限的,因此目前使用伸缩盒子来实现居中还是最可靠的方法。

浏览器兼容性

各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息,请参见下表

align-items

BCD tables only load in the browser

justify-content

BCD tables only load in the browser

MDN上相关的资源