使用 CSS 實現(xiàn)居中效果困難嗎？顯然不是。實際上有許多方法可以實現(xiàn)居中效果，但在具體情況中，我們往往無法判斷哪種方法最合適。
所以讓我們來創(chuàng)建一個層次結構的方法集，幫助你解決選擇困難癥~
在塊級父容器中讓行內元素居中，只需使用 text-align: center;：
這種方法可以讓 inline/inline-block/inline-table/inline/flex 等類型的元素實現(xiàn)居中。
讓塊級元素居中的方法就是設置 margin-left 和 margin-right 為 auto（前提是已經(jīng)為元素設置了適當?shù)?width 寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）。常見用法如下所示：
.center-me { margin: 0 auto;}無論父級容器和塊級元素的寬度如何變化，都不會影響塊級元素的居中效果。
請注意，float 屬性是不能實現(xiàn)元素居中的。如果你想知道使用 float 實現(xiàn)居中的非常規(guī)方案，可以參考這篇文章。
有關于水平居中更多實現(xiàn)方法，可以參閱早期整理的一篇博客《六種實現(xiàn)元素水平居中》
如果要讓多個塊級元素在同一水平線上居中，那么可以修改它們的 display 值。這里有兩個示例，其中一個使用了 inline-block 的顯示方式，另一個使用了 flexbox 的顯示方式：
如果你想讓多個垂直堆棧的塊元素，那么仍然可以通過設置 margin-left 和 margin-right 為 auto 來實現(xiàn)：
使用 CSS 實現(xiàn)垂直居中需要一些技巧。
對于單行行內或者文本元素，只需為它們添加等值的 padding-top 和 padding-bottom 就可以實現(xiàn)垂直居中：
.link { padding-top: 30px; padding-bottom: 30px;}如果因為某些原因我們不能使用 padding 屬性來實現(xiàn)垂直居中，而且已知文本不會換行，那么就可以讓 line-height 和 center 相等，從而實現(xiàn)垂直居中：
.center-text-trick { height: 100px; line-height: 100px; white-space: nowrap;}對于多行文本，同樣可以使用等值 padding-top 和 padding-bottom 的方式實現(xiàn)垂直居中。如果你在使用過程中發(fā)現(xiàn)這種方法沒見效，那么你可以通過 CSS 為文本設置一個類似 table-cell 的父級容器，然后使用 vertical-align 屬性實現(xiàn)垂直居中：
此外，你還可以使用 flexbox 實現(xiàn)垂直居中，對于父級容器為 display: flex 的元素來說，它的每一個子元素都是垂直居中的：
.flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px;}值得注意的是，上述方法只適用于父級容器擁有確定高度的元素。
如果上述方法都不起作用，那么你就需要使用被稱為幽靈元素（ghost element）的非常規(guī)解決方式：在垂直居中的元素上添加偽元素，設置偽元素的高等于父級容器的高，然后為文本添加 vertical-align: middle; 樣式，即可實現(xiàn)垂直居中。
.ghost-center { position: relative;}.ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;}.ghost-center p { display: inline-block; vertical-align: middle;}無法獲知元素的具體高度是非常常見的一種狀況，比如：視區(qū)寬度變化，會觸發(fā)布局重繪，從而改變高度；對文本施加不同的樣式會改變高度；文本的內容量不同會改變高度；當寬度變化時，對于寬高比例固定的元素（比如圖片），也會自動調整高度……
如果我們知道元素的高度，可以這樣來實現(xiàn)垂直居中：
.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現(xiàn)垂直居中：
.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}使用 flexbox 實現(xiàn)垂直居中非常簡單：
.parent { display: flex; flex-direction: column; justify-content: center;}通過組合水平居中和垂直居中的技巧，可以實現(xiàn)非常完美的居中效果。我覺得可以將它們分為三種類型：
設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%，最后使用負向 margin 實現(xiàn)水平和垂直居中，margin 的值為寬高（具體的寬高需要根據(jù)實際情況計算 padding）的一半。
.parent { position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;}如果無法獲取確定的寬高，同樣需要設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下來需要使用 transform: translate(-50%, -50%); 實現(xiàn)垂直居中：
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}使用 transform 有一個缺陷，就是當計算結果含有小數(shù)時（比如 0.5），會讓整個元素看起來是模糊的，一種解決方案就是為父級元素設置 transform-style: preserve-3d; 樣式：
.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}.element { position: relative; top: 50%; transform: translateY(-50%);}使用 flexbox 實現(xiàn)水平和垂直居中，只需使用兩條居中屬性即可：
.parent { display: flex; justify-content: center; align-items: center;}你看，使用 CSS 可以讓任何元素實現(xiàn)居中效果。
本文根據(jù)@Chris Coyier的《Centering in CSS: A Complete Guide》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：https://css-tricks.com/centering-css-complete-guide/。
