水平居中：horizontally
1.行內元素
text-align : center;
2.單個塊級元素
你可以設定乙個塊級元素居中，如果你已經設定了這個塊元素的寬度（width）的話，設定其margin-left和margin-right為auto就可以。如果你沒有設width，塊級元素通常會佔滿其父元素顯示。
通常情況下你不能讓乙個浮動元素居中
3.多個塊級元素在一行內水平居中
此時你可以修改這些塊級元素的display屬性為inline-block或flexbox。
inline-block的情況
//父元素設定text-align為center
.inline-block-center
//子元素設定display為inline-block
.inline-block-center div
flexbox的情況:
直接設定父元素的display為flex,將父元素作為彈性伸縮盒顯示
.flex-center
垂直居中：vertically
1.行內元素
1.1單行行內元素
有時候行內元素或文字元素看上去垂直居中，僅僅是因為其上下內邊距設定了相同的值。
.link
如果有時候你不想選擇padding，那還有一種方法就是設定line-height的值與height的值相等。
.center-text-trick
1.2多行元素
設定相同的padding-top和padding-bottom對多行元素也會產生垂直居中的效果。
但是如果padding設定不好使的時候，我們也可以使用table和table-cell。對display為table-cell的元素使用vertical-align為middle即可。
.center-table
.center-table p
如果table過時了，那你可以嘗試一下flexbox，乙個flex子元素可以在其flex父元素中很簡單的居中。
.flex-center-vertically
注意：垂直居中的條件必須是其父元素有乙個固定的高度height。
如果以上幾種垂直居中的方法就失效了，那就只能'ghost element'技術，用偽元素(pseudo element)了。乙個滿高的偽元素被放置在父容器中，要垂直居中的元素和它一起居中。
.ghost-center
.ghost-center :: before
.ghost-center p
2.塊級元素
2.1知道元素的高度？
在網頁布局中，不知道某個塊元素的高度是很常見的，因為當塊元素的寬度改變時，其內容也會隨著改變高度。文字樣式的變化也會改變文字的總體高度。文字內容大小的變化也會改變文字的總體高度。
有固定高寬比例的元素。比如img，當其調整大小時，也會改變高度。
但如果你知道元素的高度，那改元素垂直居中可以這樣寫：
.parent
.child
2.2不知道元素的高度
我們還是可以把該元素先壓到父元素一半的地方，然後再往上輕推一點，具體如下：
.parent
.child
2.3是否可以利用css3的flexbox呢？
可以的，並且很簡單。
.parent
3.水平+垂直居中
1.元素有固定的寬度和高度
先對元素絕對定位，讓其先定位在父元素的50%/50%處，然後使用負外邊距，使其等於元素寬度和高度的一半，具體**如下
.parent
.child
2.元素的寬度和高度未知
如果你不知道元素的寬度和高度，你可以使用css3的transition過度屬性，使用translate函式，並在x,y兩個方向都移動該元素高寬的-50%。
.parent
.child
3.使用css3的flexbox
需要使用flexbox的兩個方向上的居中屬性，**如下：
.parent
結論：利用css，你可實現完全的居中。
原文：
居中的css 完全指南 翻譯
譯自 對於行內元素可以使用如下實現水平居中 blocklist1 1這種方法對於inline，inline block，inline table等都有效。對於乙個塊元素，可以設定其margin left和margin right自動 blocklist1 2 div1無論塊元素的寬度是否已知，都可以...
居中的css 完全指南 翻譯
blocklist1 1這種方法對於inline，inline block，inline table等都有效。blocklist1 2 div1無論塊元素的寬度是否已知，都可以實現水平居中。blocklist1 3 div1 blocklist1 3 div1 div.blocklist1 3 di...
CSS居中完全解決方案
把行內元素巢狀在乙個div中，並且在div中設定以下樣式 a 對於定寬的塊級元素，我們要設定起margin top,margin right 為auto center 多個塊級元素，我們將其display設定為inline block 然後將父級元素設定一下屬性 div 設定需要水平居中的塊狀元素的...