使用 css 實現居中效果困難嗎？顯然不是。實際上有許多方法可以實現居中效果，但在具體情況中，我們往往無法判斷哪種方法最合適。
所以讓我們來建立乙個層次結構的方法集，幫助你解決選擇困難症~
在塊級父容器中讓行內元素居中，只需使用text-align: center;：
這種方法可以讓inline/inline-block/inline-table/inline/flex等型別的元素實現居中。
讓塊級元素居中的方法就是設定margin-left和margin-right為auto（前提是已經為元素設定了適當的width寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）。常見用法如下所示：
.center-me
無論父級容器和塊級元素的寬度如何變化，都不會影響塊級元素的居中效果。
請注意，float屬性是不能實現元素居中的。如果你想知道使用float實現居中的非常規方案，可以參考這篇文章。
有關於水平居中更多實現方法，可以參閱早期整理的一篇部落格《六種實現元素水平居中》如果要讓多個塊級元素在同一水平線上居中，那麼可以修改它們的
display值。這裡有兩個示例，其中乙個使用了inline-block的顯示方式，另乙個使用了flexbox的顯示方式：
如果你想讓多個垂直堆疊的塊元素，那麼仍然可以通過設定margin-left和margin-right為auto來實現：
使用 css 實現垂直居中需要一些技巧。
單行對於單行行內或者文字元素，只需為它們新增等值的padding-top和padding-bottom就可以實現垂直居中：
.link
如果因為某些原因我們不能使用padding屬性來實現垂直居中，而且已知文字不會換行，那麼就可以讓line-height和center相等，從而實現垂直居中：
.center-text-trick
多行對於多行文字，同樣可以使用等值padding-top和padding-bottom的方式實現垂直居中。如果你在使用過程中發現這種方法沒見效，那麼你可以通過 css 為文字設定乙個類似table-cell的父級容器，然後使用vertical-align屬性實現垂直居中：
此外，你還可以使用flexbox實現垂直居中，對於父級容器為display: flex的元素來說，它的每乙個子元素都是垂直居中的：
.flex-center-vertically
值得注意的是，上述方法只適用於父級容器擁有確定高度的元素。
如果上述方法都不起作用，那麼你就需要使用被稱為幽靈元素（ghost element）的非常規解決方式：在垂直居中的元素上新增偽元素，設定偽元素的高等於父級容器的高，然後為文字新增vertical-align: middle;樣式，即可實現垂直居中。
.ghost-center
.ghost-center
::before
.ghost-center
p
已知元素的高度
無法獲知元素的具體高度是非常常見的一種狀況，比如：視區寬度變化，會觸發布局重繪，從而改變高度；對文字施加不同的樣式會改變高度；文字的內容量不同會改變高度；當寬度變化時，對於寬高比例固定的元素（比如），也會自動調整高度……
如果我們知道元素的高度，可以這樣來實現垂直居中：
.parent
.child
未知元素的高度
如果我們不知道元素的高度，那麼就需要先將元素定位到容器的中心位置，然後使用transform的translate屬性，將元素的中心和父容器的中心重合，從而實現垂直居中：
.parent
.child
flexbox
使用flexbox實現垂直居中非常簡單：
.parent
通過組合水平居中和垂直居中的技巧，可以實現非常完美的居中效果。我覺得可以將它們分為三種型別：
設定父級容器為相對定位的容器，設定子元素絕對定位的位置position: absolute; top: 50%; left: 50%，最後使用負向margin實現水平和垂直居中，margin的值為寬高（具體的寬高需要根據實際情況計算padding）的一半。
.parent
.child
如果無法獲取確定的寬高，同樣需要設定父級容器為相對定位的容器，設定子元素絕對定位的位置position: absolute; top: 50%; left: 50%。不同的是，接下來需要使用transform: translate(-50%, -50%);實現垂直居中：
.parent
.child
使用transform有乙個缺陷，就是當計算結果含有小數時（比如0.5），會讓整個元素看起來是模糊的，一種解決方案就是為父級元素設定transform-style: preserve-3d;樣式：
.parent-element
.element
.parent
你看，使用 css 可以讓任何元素實現居中效果。
著作權歸作者所有。
原文:
w3cplus.com
CSS居中完整指南
使用 css 實現居中效果困難嗎？顯然不是。實際上有許多方法可以實現居中效果，但在具體情況中，我們往往無法判斷哪種方法最合適。所以讓我們來建立乙個層次結構的方法集，幫助你解決選擇困難症 在塊級父容器中讓行內元素居中，只需使用text align center 這種方法可以讓inline inline...
在CSS中水平居中和垂直居中 完整的指南
一 水平居中 1.行內元素水平居中 2.block元素水平居中 3.多個塊級元素水平居中 二 垂直居中 1.行內元素水平居中 2.block元素水平居中 3.用flexbox 三 水平和垂直居中 1.元素是都有定寬定高 2.元素寬高不定 3.用flexbox 了解了文章的架構，就讓我們追條擊破！一 ...
居中的css 完全指南 翻譯
譯自 對於行內元素可以使用如下實現水平居中 blocklist1 1這種方法對於inline，inline block，inline table等都有效。對於乙個塊元素，可以設定其margin left和margin right自動 blocklist1 2 div1無論塊元素的寬度是否已知，都可以...