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，会省下不少功夫！怎么学习？青蛙会告诉你~
思考
这里说得所有居中，都是浏览器认为的居中，有时与人类眼中的居中，是不同的。例如，将单行内容为 。。。 的文字按以上任一方法垂直居中，其显示效果是偏下的。原因归根于，我们看到的文字是基于像素的，浏览器看到的文字是基于当前选用的字体信息，可以通过这篇文章（或其译文）了解大概。对于文字，浏览器认为的居中未必是像素居中。所以，某个大字标题在网页中的居中效果和设计稿中不同时，不要太惊讶。
网友评论