css居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把css居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。如有漏掉的，還會陸續的補充進來，算做是乙個備忘錄吧。
利用text-align: center可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素(inline), 內聯塊(inline-block), 內聯表(inline-table),inline-flex元素水平居中都有效。
核心**：
1 .center-text演示**
通過把固定寬度塊級元素的margin-left和margin-right設成auto，就可以使塊級元素水平居中。
核心**：
1 .center-block演示**
1.3.1 利用inline-block
如果一行中有兩個或兩個以上的塊級元素，通過設定塊級元素的顯示型別為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
核心**：
1 .container
4 .inline-block
演示**
1.3.2 利用display: flex
利用彈性布局(flex)，實現水平居中，其中justify-content用於設定彈性盒子元素在主軸（橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。
核心**：
1 .flex-center演示**
通過設定內聯元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。
核心**：
1 #v-box演示**
2.2.1 利用表布局（table）
利用表布局的vertical-align: middle可以實現子元素的垂直居中。
核心**：
1 .center-table
4 .v-cell
演示**
2.2.2 利用flex布局（flex）
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。因為flex布局是css3中定義，在較老的瀏覽器存在相容性問題。
核心**：
1 .center-flex演示**
2.2.3 利用「精靈元素」
利用「精靈元素」(ghost element)技術實現垂直居中，即在父容器內放乙個100%高度的偽元素，讓文字和偽元素垂直對齊，從而達到垂直居中的目的。
核心**：
1 .ghost-center
4 .ghost-center::before
11 .ghost-center p
演示**
2.3.1 固定高度的塊級元素
我們知道居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現垂直居中了。
核心**：
1 .parent
4 .child
演示**
2.3.2 未知高度的塊級元素
當垂直居中的元素的高度和寬度未知時，我們可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
核心**：
1 .parent
4 .child
演示**
通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心**：
1 .parent
4 .child
演示**
利用2d變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心**：
1 .parent
4 .child
演示**
利用flex布局，其中justify-content用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
核心**：
1 .parent演示**
利用grid實現水平垂直居中，相容性較差，不推薦。
核心**：
1 .parent
5 .child
演示**
螢幕上水平垂直居中十分常用，常規的登入及註冊頁面都需要用到。要保證較好的相容性，還需要用到表布局。
核心**：
1 .outer
7 8 .middle
12 13 .inner
演示**
你知道CSS實現水平垂直居中的第10種方式嗎？
1.absolute 負 margin 123123 公共 wp box box.size 公共 此處引用上面的公共 此處引用上面的公共 定位 wp box 2.absolute margin auto 123123 此處引用上面的公共 此處引用上面的公共 定位 wp box 3.absolute ...
css實現div垂直水平居中的2種常用方法
利用vertical align middle進行垂直方向上的居中對齊，此方法需要滿足的條件 設定父元素的行高line height等於父元素height的高度 子元素必須是行內塊級元素display inline block 子元素設定vertical align middle 此方法在開發中不能...
CSS總結div中的內容垂直居中的五種方法
文章目錄 一 行高 line height 法 二 內邊距 padding 法 三 模擬 法 四 css3的transform來實現 五 css3的box方法實現水平垂直居中 六 flex布局 2018 04 17補充 一 行高 line height 法 如果要垂直居中的只有一行或幾個文字，那它的...