css居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把css居中的方案彙編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。如有漏掉的，還會陸續的補充進來，算做是乙個備忘錄吧。
內聯元素水平居中
利用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核心**：
#v-boxtable）
利用表布局的vertical-align: middle可以實現子元素的垂直居中。
核心**：
.center-table
.v-cell
flex）
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。因為flex布局是css3中定義，在較老的瀏覽器存在相容性問題。
核心**：
.center-flex利用「精靈元素」(ghost element)技術實現垂直居中，即在父容器內放乙個100%高度的偽元素，讓文字和偽元素垂直對齊，從而達到垂直居中的目的。
核心**：
.ghost-center
.ghost-center::before
.ghost-center p
我們知道居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現垂直居中了。
核心**：
.parent
.child
當垂直居中的元素的高度和寬度未知時，我們可以借助css3中的transform屬性向y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
核心**：
.parent
.child
核心**：
.parent
.child
核心**：
.parent
.child
核心**：
.parent.parent
.child
核心**：
.outer
.middle
.inner
各種居中方式小記
1.單行內容的居中 middle demo 1 2.父元素未設定高度，內容居中 middle demo 2 3.子元素有固定高度，使用絕對定位的 div，把它的 top 設定為 50 top margin 設定為負的 content 高度。content 4.使用 的 vertical align ...
各種居中方案
元素居中是常見的場景，此頁為總結各種實現方式 內聯元素 inline,inline block等 將父元素的text align屬性設為center。text align css屬性定義行內內容 例如文字 如何相對它的塊父元素對齊。塊級元素 block等 設定margin left,margin r...
CSS居中方法大全
內聯元素 text align center這個屬性會讓內聯子元素水平居中 塊級元素 margin left auto margin right auto 水平居中通用方法margin left 50 transform translatex 50 這個方法可以讓內聯元素自身居中，margin的百分...