如何居中乙個元素（終結版）
塊級元素
水平居中
多塊級元素水平居中
利用text-align: center可以實現在塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parentdemo
通過line-height
單行內聯元素垂直居中。。
利用flex布局
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在相容性問題。
dance like nobody is watching, code like everybody is.
dance like nobody is watching, code like everybody is.
dance like nobody is watching, code like everybody is.
利用表布局的vertical-align: middle可以實現子元素的垂直居中
the more technology you learn, the more you realize how little you know.
the more technology you learn, the more you realize how little you know.
the more technology you learn, the more you realize how little you know.
固定高度的塊級元素垂直居中。
transform屬性只支援到ie9
未知高度的塊級元素垂直居中。
通過設定flex布局中的屬性align-items，使子元素垂直居中。
未知高度的塊級元素垂直居中。
.child先將子元素設定為塊級**來顯示（類似），再將其設定水平居中
display:table在表現上類似block元素，但是寬度為內容寬。
demo
先將父元素設定relative，再將子元素設定為absolute，向右移動子元素，移動距離為父容器的一半，最後通過向左移動子元素的一半寬度以達到水平居中。
demo
通過css3中的布局利器flex中的justify-content屬性來達到水平居中。
demo
通過flex將父容器設定為為flex布局，再設定子元素居中。
#container.container
.inline-block
不定寬元素水平居中
1.父層 改變display為inline型別 設定為 行內元素 顯示 然後子層 使用text align center來實現居中。存在問題 將塊元素的display設定為inline型別，少了一些功能，比如 設定長度值。2.塊級元素水平居中不能使用text align center，一種常用的做法...
讓不定寬元素垂直居中
前情提要 margin auto預設支援水平居中，不支援垂直居中 父元素 display grid，子元素 margin auto 父元素 display flex，子元素 margin auto 父元素 position relative，子元素 position absolute left 50...
CSS未知寬高元素水平垂直居中
方法一 思路 顯示設定父元素為 table，子元素為 cell table，這樣就可以使用vertical align center，實現水平居中 優點 父元素 parent 可以動態的改變高度 table元素的特性 缺點 ie8以下不支援 lang en charset utf 8 未知寬高元素水...