CSS 居中的方法實(shí)在是太多啦，每次光靠 Google 去搜都要費(fèi)好大力氣。看了 Centering in CSS: A Complete Guide 才清楚了許多，對自己的認(rèn)識做個(gè)總結(jié)。
[TOC]
水平居中
inline 和 inline-* 元素
在一個(gè) block-level 中的 inline, inline-block, inline-table, inline-flex 元素，居中只需要一行：
.center-children {
text-align: center;
}
block-level 元素
將左右的 margin 設(shè)置升 auto 就可以讓一個(gè) block-level 元素居中，常常見到這種寫法：
.center{
margin: 0 auto;
}
簡寫雖然方便，但是如果不希望上下 margin 設(shè)置為 0，此寫法就會(huì)帶來副作用。分別設(shè)置會(huì)更安全些：
.center{
margin-left: auto;
margin-right: auto;
}
至少兩個(gè)的 block-level 元素
多個(gè) block-level 的元素在居中在一行，需要將 display: block 改為 display: inline-block 然后設(shè)置其父元素的 text-align，具體見下樣例：
<a class="jsbin-embed" >JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>
或者，你也可以使用 flexbox 呀~ 這個(gè)稍后說。
垂直居中
垂直居中會(huì)稍微麻煩一丟
inline 和 inline-* 元素
有一個(gè)簡單粗暴的方法：直接設(shè)置上下 padding 相等。不過有時(shí)候，這個(gè)方法不是那么有效。
只有一行
因?yàn)橹挥幸恍校阅茉O(shè)置 line-height 和 height 相等完成居中。
存在多行
如果是自己設(shè)置的 table-cell 元素，需要設(shè)置 vertical-align: middle; 完成居中。在 td 這項(xiàng)屬性值是默認(rèn)的，不要設(shè)置。詳見樣例：
<a class="jsbin-embed" >JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>
巧了，你也可以使用 flexbox 呀~ 這個(gè)稍后再說。
一個(gè) block-level 元素
有些時(shí)候我們未必會(huì)知道 block-level 元素的高度，這取決于其內(nèi)部放置的元素。如果不用 flexbox 的話，需要分情況討論：
已知高度
已知高度的話，先學(xué)會(huì)算數(shù)，再學(xué)會(huì)定位，用樣例說話：
<a class="jsbin-embed" >JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>
未知高度
未知也沒關(guān)系，設(shè)置 top: 50%，這樣元素的頂部就處于父元素正中間，再讓其向上平移自身 50%（transform: translateY(-50%);）的高度，其內(nèi)容就居中了。可以自己編輯樣例試試：
<a class="jsbin-embed" >JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.5"></script>
當(dāng)然，你也可以使用 flexbox 呀~ 這個(gè)還是稍后再說。
水平垂直居中
可以通過以上方法的組合按自己喜歡的方式完成水平居中。其中通過定位對各個(gè)瀏覽器都比較友好，水平居中直接設(shè)置 top: 50%; left: 50%;；垂直居中按照「已知高度」和「未知高度」的思路區(qū)分實(shí)現(xiàn)，注意在「未知高度」時(shí)還要兼顧 x 方向平移 50%（即 transform: translate(-50%, -50%)）。
使用 flexbox!!!
如果不需要考慮部分老舊瀏覽器的兼容問題，那么 flexbox 則是萬能了。強(qiáng)烈推薦學(xué)習(xí)并使用 flexbox，會(huì)省下不少功夫！怎么學(xué)習(xí)？青蛙會(huì)告訴你~
思考
這里說得所有居中，都是瀏覽器認(rèn)為的居中，有時(shí)與人類眼中的居中，是不同的。例如，將單行內(nèi)容為 。。。 的文字按以上任一方法垂直居中，其顯示效果是偏下的。原因歸根于，我們看到的文字是基于像素的，瀏覽器看到的文字是基于當(dāng)前選用的字體信息，可以通過這篇文章（或其譯文）了解大概。對于文字，瀏覽器認(rèn)為的居中未必是像素居中。所以，某個(gè)大字標(biāo)題在網(wǎng)頁中的居中效果和設(shè)計(jì)稿中不同時(shí)，不要太驚訝。
