利用 CSS 居中对齐

CSS 居中的方法实在是太多啦，每次光靠 Google 去搜都要费好大力气。看了 Centering in CSS: A Complete Guide 才清楚了许多，对自己的认识做个总结。

[TOC]

水平居中

inline 和 inline-* 元素

在一个 block-level 中的 inline, inline-block, inline-table, inline-flex 元素，居中只需要一行：

.center-children {
    text-align: center;
}

block-level 元素

将左右的 margin 设置升 auto 就可以让一个 block-level 元素居中，常常见到这种写法：

.center{
  margin: 0 auto;
}

简写虽然方便，但是如果不希望上下 margin 设置为 0，此写法就会带来副作用。分别设置会更安全些：

.center{
  margin-left:  auto;
  margin-right: auto;
}

至少两个的 block-level 元素

多个 block-level 的元素在居中在一行，需要将 display: block 改为 display: inline-block 然后设置其父元素的 text-align，具体见下样例：

<a class="jsbin-embed" href="http://jsbin.com/zutimo/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>

或者，你也可以使用 flexbox 呀~ 这个稍后说。

垂直居中

垂直居中会稍微麻烦一丢

inline 和 inline-* 元素

有一个简单粗暴的方法：直接设置上下 padding 相等。不过有时候，这个方法不是那么有效。

只有一行

因为只有一行，所以能设置 line-height 和 height 相等完成居中。

存在多行

如果是自己设置的 table-cell 元素，需要设置 vertical-align: middle; 完成居中。在 td 这项属性值是默认的，不要设置。详见样例：

<a class="jsbin-embed" href="http://jsbin.com/kawido/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>

巧了，你也可以使用 flexbox 呀~ 这个稍后再说。

一个 block-level 元素

有些时候我们未必会知道 block-level 元素的高度，这取决于其内部放置的元素。如果不用 flexbox 的话，需要分情况讨论：

已知高度

已知高度的话，先学会算数，再学会定位，用样例说话：

<a class="jsbin-embed" href="http://jsbin.com/kunami/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>

未知高度

未知也没关系，设置 top: 50%，这样元素的顶部就处于父元素正中间，再让其向上平移自身 50%（transform: translateY(-50%);）的高度，其内容就居中了。可以自己编辑样例试试：

<a class="jsbin-embed" href="http://jsbin.com/wirekot/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>

当然，你也可以使用 flexbox 呀~ 这个还是稍后再说。

水平垂直居中

可以通过以上方法的组合按自己喜欢的方式完成水平居中。其中通过定位对各个浏览器都比较友好，水平居中直接设置 top: 50%; left: 50%;；垂直居中按照「已知高度」和「未知高度」的思路区分实现，注意在「未知高度」时还要兼顾 x 方向平移 50%（即 transform: translate(-50%, -50%)）。

使用 flexbox!!!

如果不需要考虑部分老旧浏览器的兼容问题，那么 flexbox 则是万能了。强烈推荐学习并使用 flexbox，会省下不少功夫！怎么学习？青蛙会告诉你~

思考

这里说得所有居中，都是浏览器认为的居中，有时与人类眼中的居中，是不同的。例如，将单行内容为 。。。 的文字按以上任一方法垂直居中，其显示效果是偏下的。原因归根于，我们看到的文字是基于像素的，浏览器看到的文字是基于当前选用的字体信息，可以通过这篇文章（或其译文）了解大概。对于文字，浏览器认为的居中未必是像素居中。所以，某个大字标题在网页中的居中效果和设计稿中不同时，不要太惊讶。

参考

• Centering in CSS: A Complete Guide
• CSS 元素居中对齐大法