利用text-align: center可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素(inline), 內聯塊(inline-block),內聯表(inline-table),(inline-flex)元素水平居中都有效。
核心**：
.center-text
複製**
margin-left和margin-right設成auto，就可以使塊級元素水平居中。
核心**：
.center-block
複製**
inline-block
如果一行中有兩個或兩個以上的塊級元素，通過設定塊級元素的顯示型別為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
核心**：
.container
.inline-block
複製**
display: flex
利用彈性布局(flex)，實現水平居中，其中justify-content用於設定彈性盒子元素在主軸（橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。
核心**：
.flex-center
複製**
(height)和行高(line-height)相等，從而使元素垂直居中。
核心**：
#v-box
複製**
利用表布局的vertical-align: middle可以實現子元素的垂直居中。
核心**：
.center-table
.v-cell
複製**
利用flex布局實現垂直居中，其中flex-direction:column定義主軸方向為縱向。因為flex布局是css3中定義，在較老的瀏覽器存在相容性問題。
核心**：
.center-flex
複製**
利用「精靈元素」(ghostelement)技術實現垂直居中，即在父容器內放乙個100%高度的偽元素，讓文字和偽元素垂直對齊，從而達到垂直居中的目的。
核心**：
.ghost-center
.ghost-center::before
.ghost-center p
複製**
我們知道居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現垂直居中了。
核心**：
.parent
.child
複製**
當垂直居中的元素的高度和寬度未知時，我們可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
核心**：
.parent
.child
複製**
margin平移元素整體寬度的一半，使元素水平垂直居中。
核心**：
.parent
.child
複製**
在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心**：
.parent
.child
複製**
將子元素設定為脫離文件流的position定位屬性fixed或absolute,並使其位置屬性(top、bottom、left、right)全部設定為0，外邊距margin設定為auto，即可實現水平垂直居中。
.parent
.child
複製**
利用flex布局，其中justify-content用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
核心**：
.parent
複製**
核心**：
.parent
.child
複製**
核心**：
.parent
.child
複製**
核心**：
.outer
.middle
.inner
複製**
CSS居中方式總結
一 水平居中 1 行內元素或者display為inline的塊級元素，前提是子元素沒有float 對父元素設定 text align center 2 塊級元素 已知寬高 1 元素自身設定為 margin 0 auto 2 利用絕對定位和margin結合的方式 elem 3 塊級元素 未知寬高 1 ...
CSS居中方式總結
1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...
CSS居中方式總結
1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...