元素居中的常用方式

温馨提示：本文内嵌代码演示较多，可能会出现加载缓慢的现象。如果演示框没有加载出来，可以尝试访问voezy’s public fiddles

适用情况：居中元素宽度已知；不要求现代浏览器

利用 margin: 0 auto 可以非常简便地使元素水平居中。
代码和结果如下。

适用情况：居中元素宽度已知(transform可以不用知道元素宽度)；不要求现代浏览器

先使子元素绝对定位，向某个方向偏移容器宽度的一半，再设置子元素反方向的margin为子元素的一半宽度。
代码和结果如下。

其中，可以将margin-left改成transform的方式，效果相同。但这时候就要求浏览器的支持了。

transform: translate(-50%, 0);

当然用transform要注意浏览器兼容性(IE 9+，9需要浏览器前缀)。

还有个绝对定位+四方向归零+margin: auto实现的，见鑫大佬博客: 小tip: margin:auto实现绝对定位元素的水平垂直居中

适用情况：居中元素宽度已知或未知, 多个元素水平居中；不要求现代浏览器

把居中元素设置为行内(块)元素，容器设置文字居中分布，就可以将行内元素居中显示。

适用情况: 居中元素宽度已知或未知, 多个元素水平居中, 要求现代浏览器（IE10+）

即 display: flex; ，并且设置子元素的水平分布方式。与一般的盒子模型有很多差异。用它来使元素水平居中比较简单，而且还可以居中多个元素。但是桌面浏览器的兼容性也是一个问题，尤其是IE要求10+。

要注意的是，如果要水平居中的子元素如果未设置高度，那么它的高度将被拉伸到与容器元素高度相等。再设置一个垂直方向的对齐方式为center就可以解决。

上代码和结果：

适用情况: 行内元素，单行，容器元素高度已知; 不要求现代浏览器

行高设为容器元素本身的高度，即可使其中的单行行内元素垂直居中。

适用情况: 行内元素, 单行或多行；不要求现代浏览器

容器高度未设置，上下padding设为相等的值，即可将其中的行内元素垂直居中。

与水平居中时的情况和使用方法一样。

适用情况: 要求IE8+

这个是将容器元素的显示方式设为table-cell，再设置垂直方向的对齐方式为middle即可。

又或者将容器元素的显示方式设置为table，需要垂直居中的元素设置为 display: table-cell, 并且 vertical-align: middle;。

适用情况: 要求现代浏览器(IE10+)

行内元素和块级元素垂直居中都适用。与水平居中时的情况和使用方法类似，区别是设置垂直方向元素对齐方式为center。

适用情况：要求现代浏览器

将上述水平和垂直居中方式结合在一起就可以了。

适用情况: 使用margin时要知道子元素的尺寸，使用transform时要求现代浏览器

将上述水平和垂直方向居中的 绝对定位 + transform 一起使用即可。

适用情况：行内元素

text-align: center; 和上述设置行内元素垂直居中的行高法结合，就可以将行内元素水平垂直居中。

还有 绝对定位 + 负值margin，绝对定位 + 四个方向距离为0等方式，可以参考: 关于css水平垂直居中的总结

用得少就不罗列了，先熟悉最常用的方法。