css居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把css居中的方案彙編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。如有漏掉的，還會陸續的補充進來。
水平居中
1.1內聯元素水平居中
利用 text-align: center 可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素(inline), 內聯塊(inline-block), 內聯表(inline-table), inline-flex元素水平居中都有效。
.center-text
1.2塊級元素水平居中
通過把固定寬度塊級元素的margin-left和margin-right設成auto，就可以使塊級元素水平居中。
.center-block
1.3多塊級元素水平居中
1.3.1 利用inline-block
如果一行中有兩個或兩個以上的塊級元素，通過設定塊級元素的顯示型別為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
.container
.inline-block
1.3.2 利用display: flex
利用彈性布局(flex)，實現水平居中，其中justify-content 用於設定彈性盒子元素在主軸（橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。
.flex-center
垂直居中
2.1 單行內聯(inline-)元素垂直居中
通過設定內聯元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。
#v-box
行內的line-height的值和父級的高度相等就可以垂直居中
.container
.center
2.2 多行元素垂直居中
2.2.1 利用表布局（table）
利用表布局的vertical-align: middle可以實現子元素的垂直居中。
.center-table
.v-cell
設定display的值為table-cell，將元素變為**cell顯示
.container
2.2.2 利用flex布局（flex）
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。因為flex布局是css3中定義，在較老的瀏覽器存在相容性問題。
.center-flex
2.2.3 利用「精靈元素」
利用「精靈元素」(ghost element)技術實現垂直居中，即在父容器內放乙個100%高度的偽元素，讓文字和偽元素垂直對齊，從而達到垂直居中的目的。
.ghost-center
.ghost-center::before
.ghost-center p
2.3 塊級元素垂直居中
2.3.1 固定高度的塊級元素
我們知道居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現垂直居中了。
.parent
.child
2.3.2 未知高度的塊級元素
當垂直居中的元素的高度和寬度未知時，我們可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
.parent
.child 水平垂直居中
不知道父級的高度垂直居中，將上下padding的值相等
.container
.center
3.1 固定寬高元素水平垂直居中
通過margin平移元素整體寬度的一半，使元素水平垂直居中。
.parent
.child
3.2 未知寬高元素水平垂直居中
利用2d變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
.parent
.child
3.3 利用flex布局
利用flex布局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
.parent
3.4 利用grid布局
利用grid實現水平垂直居中，相容性較差，不推薦。
.parent
.child
3.5 螢幕上水平垂直居中
螢幕上水平垂直居中十分常用，常規的登入及註冊頁面都需要用到。要保證較好的相容性，還需要用到表布局。
.outer
.middle
.inner
新增偽元素實現居中
.container
.container::before
說明：文中所述方案只是居中方案其中的一部分，並不是全部。另**中涉及css3的flex，transform，grid等內容都存在相容性問題。
css居中方案彙總
使其父元素為塊級元素的行內元素水平居中。css center children 設定塊級元素的 margin left 和 margin right 為 auto 來使其水平居中。注意 這個塊級元素要有 width 屬性，否則會佔滿寬度，這時候已經不需要居中了。css center me 方案一 利...
css居中方法
水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...
CSS布局 居中方法
在web頁面布局中居中是我們常遇到的情況，而居中分為水平居中與垂直居中 文字的居中 css中對文字的居中做的非常友好，我們是需要text align,line height 兩個屬性就可以控制文字的水平以及垂直居中 head style type text css text style head b...