各類CSS居中方案

頁面居中，各類元素居中是咱們開發是很常見的狀況，下面就來討論下水平居中，垂直居中以及水平加垂直居中都有哪些常見的方案。咱們的目標是對齊下面這兩個div:

<div class="parent">
  <div class="child">
    DEMO
  </div>
</div>
複製代碼

爲了看清楚，咱們給父級一個淺灰的背景，子級一個深灰的背景，開始時咱們什麼樣式都不寫，是下面這樣的，子級會默認給父級撐滿：

水平居中

text-align + inline-block

.parent{
  /* text-align會對inline的子級生效，設置爲center就會水平居中 */
    text-align: center;
}

.child{
  /* display設置爲inline-block子級就不會撐滿父級，而是自適應內容 */
    display: inline-block;
  /* text-align會繼承，child的子級也會水平居中，若是咱們想恢復默認，手動寫爲左對齊就好了 */
  text-align: left;
}
複製代碼

table + margin

.parent2 {
}

.child2 {
  /* display設置爲table，若是不指定寬度，寬度就是自適應內容 */
    display: table;
  /* display若是是table，margin auto就能夠生效 */
  /* 若是沒有設置display爲table，margin auto不能生效*/
    margin: 0 auto;
}

/* 若是知道子元素寬度，能夠直接應用margin auto */
複製代碼

上面這個方法適合父級元素寬度不固定，子級元素寬度也不固定的狀況。若是知道子級元素的寬度就很簡單了，直接應用margin auto便可：

.parent2 {
}

.child2 {
  width: 100px;
    margin: 0 auto;
}
複製代碼

absolute + transform

.parent4 {
  /* 父級設置relative好讓子級absolute相對於父級定位 */
    position: relative;
}

.child4 {
    position: absolute;
  /* left 50%會讓子級在正中稍微靠右一點 */
    left: 50%;
  /* translateX百分比相對的是自身，由於前面靠右了，往左挪一點 */
  /* 挪的位置恰好是自身寬的一半*/
    transform: translateX(-50%);
}
複製代碼

flex + justify-content

這應該是最簡單的一種方式了，直接在父級定義justify-content center就好了。

.parent5 {
    display: flex;
    justify-content: center;
}

.child5 {
}
複製代碼

flex + margin

flex元素也能夠支持margin auto, 因此能夠這樣寫

.parent51 {
    display: flex;
}

.child51 {
    margin: 0 auto;
}
複製代碼

垂直居中

table-cell + vertical-align

vertical-align在table-cell裏面生效，因此在給父級設置table-cell，而後vertical-align設置爲middle就好了。

.parent6 {
    display: table-cell;
    vertical-align: middle;
}

.child6 {
}
複製代碼

absolute + transform

與水平居中相似，父級設置爲relative，子級設置爲absolute，top設置爲50%，這樣會讓位置稍微偏下一點，用transform往上挪一點。

.parent7 {
    position: relative;
}

.child7 {
    position: absolute;
    top: 50%;
  /* translateY百分比也是相對於元素自身計算的 */
    transform: translateY(-50%);
}
複製代碼

flex + align-items

這個應該是最簡單的了，直接在父級設置flex和align-items: center;

.parent8 {
    display: flex;
    align-items: center;
}

.child8 {
}
複製代碼

水平垂直居中

水平垂直居中直接將前面的水平居中和垂直居中結合起來就好了。

text-align + inline-block + table-cell + vertical-align

.parent9 {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.child9 {
    display: inline-block;
}
複製代碼

absolute + transform

前面水平居中，垂直居中都有absoluate + transform方案，結合起來就能夠水平垂直居中了：

.parent10 {
    position: relative;
}

.child10 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

flex

又看到了咱們最喜歡的flex了，作居中不要太簡單！

.parent11 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.child11 {
}
複製代碼

示例代碼：

github.com/dennis-jian…

文章的最後，感謝你花費寶貴的時間閱讀本文，若是本文給了你一點點幫助或者啓發，請不要吝嗇你的贊和GitHub小星星，你的支持是做者持續創做的動力。

歡迎關注個人公衆號進擊的大前端第一時間獲取高質量原創~

「前端進階知識」系列文章：juejin.im/post/5e3ffc…

「前端進階知識」系列文章源碼GitHub地址： github.com/dennis-jian…