.parent
複製**
.son
複製**
.parent
.son
複製**
.parent
複製**
.parent
複製**
.son
複製**
.son
複製**
.son
複製**
.parent
.son
複製**
.parent::after, .son
.parent::after
複製**
.parent
.son
複製**
缺點
1）flex 2012版
.parent
複製**
缺點
2）flex 2009版
.parent
複製**
缺點
1）transform
.son
複製**
缺點
2）top: 50%
.son
複製**
缺點
3）top/bottom: 0;
.son
複製**
缺點
以上是 css 垂直居中的 8 種方法及其優缺點。
以上總結了水平居中、垂直居中各8個共16種方法。
其中，同時適用於水平居中和垂直居中。
希望幫助到了你。
歡迎討論。
感謝@ape-casear，@鬥鷹 的指正！
參考文獻
[1] louis. 16種方法實現水平居中垂直居中[ol]，2017-04-20.
[2] 慢思考快行動. css設定垂直居中[ol], 2017-09-03.
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
css 水平居中與垂直居中
1，行內元素先看它的父元素是不是塊級元素，如果是，則直接給父元素設定 text align center 如果不是，則先將其父元素設定為塊級元素，再給父元素設定 text align center 2，塊級元素 方案一 分寬度定不定兩種情況 定寬度 需要誰居中，給其設定 margin 0 auto ...
CSS垂直與水平居中
水平居中 水平居中比較簡單，所以在這裡不做過多介紹，常用的方法是margin auto 0 與 text align center 垂直居中 1.vertical align middle 是設定元素的垂直排列居中，但我們會經常遇到乙個問題就是用了這個屬性但似乎沒有效果，因為它只對一些特定顯示樣式的...