logo

CSS之居中姿势

Flex 布局

利用 Flex 布局我们可以轻松的实现元素的居中,水平居中,垂直居中。作为 CSS3 新的布局方法,but IE10+,移动端基本可以用起来。不管 block 元素,还是 inline 元素都能很好的实现居中,强无敌。

See the Pen blog-flex by Aaron (@noobcoderclub) on CodePen.

Gird布局

Gird可以实现网格布局,居中还不是手到擒来,but IE10+,移动端Android 6+,iOS 10.3+。

See the Pen dgQrZE by Aaron (@noobcoderclub) on CodePen.

postion 定位

以下是几种常见情况,固定宽高可以使用绝对定位配合负值margin,margin:calc属性,transform:translate()等样式配合居中:

See the Pen blog by Aaron (@noobcoderclub) on CodePen.

还有一种特殊情况是这样的,元素宽度是不固定的,实现元素居中,常见的是分页时,页数不固定,页数居中显示:

See the Pen blog by Aaron (@noobcoderclub) on CodePen.

Table 布局

使用 table 标签

这种方法兼容性强,但是要外套无用标签,通过 vertical-align 属性可以控制垂直居中位置,margin:auto 实现水平居中。

See the Pen
blog-table by Aaron (
@noobcoderclub) on
CodePen.

使用 display:table-cell

使用 display 属性指定为 table,table-cell 使得元素标签拥有\<table>\<td>标签的行为特征。

See the Pen blog-display by Aaron (@noobcoderclub) on CodePen.

display:inline-block

可以十分方便实现水平居中,但是要注意换行符带来的元素间的额外间距问题。

See the Pen blog] by Aaron (@noobcoderclub) on CodePen.

margin 和 width

在宽度固定的情况下配合 margin: 0 auto 可以实现居中,也是常用的居中方法。

line-height

line-heigth属性可以用于文字居中