CSS 基礎系列：水平垂直居中方案

比較全面的水平垂直居中方案。水平垂直居中問題大致分爲兩類，一類目標元素是行內元素，一類目標元素是塊級元素(其中，塊級元素又包括定寬高和不定寬高）。前端

1.水平居中方案

1.1 行內元素水平居中把該行內元素包裹在一個塊級父元素中，以後設置父元素:git

.parent{
    text-align:center
}

1.2 塊級元素水平居中設置該元素：github

div{
    width: 100px;  /* 注意寬度必定要給出 */
    margin: 0 auto; /* auto 是必須的 */
}

1.3 多個塊級元素水平居中web

轉換爲行內元素。設置目標塊級元素 display:inline-block，以後設置父元素：

.parent{
    text-align:center
}

利用彈性盒子。設置父元素：

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

2.垂直居中方案

2.1 單行行內元素垂直居中segmentfault

設置塊級父元素：微信

.parent{
    /* 設置父元素的高度等於行高 */
    height:100px;
    line-height:100px;
}

Tip)：這裏的 line-height 最終是經過繼承做用在子元素上的，因此也能夠直接設置子元素爲 line-height:100px。編輯器

2.2 多行行內元素垂直居中佈局

設置父元素：flex

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

Tip): 注意父元素得有高度，不然默認高度由子元素撐起，就沒有垂直居中的說法了。spa

2.3 已知高度的塊級元素垂直居中

設置父元素：

.parent{
    position:relative;
}

設置子塊級元素：

div{
    position:absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

Tip): 原理是絕對定位。top:50% 確保了子元素位於父元素 1/2 分割線如下，margin-top: -50px表明子元素在這個基礎上上移自身的一半高度，此時子元素與父元素中線重合，實現垂直居中。

2.4 未知高度的塊級元素垂直居中

核心代碼與上面同樣，不過由於咱們不知道子元素高度，也就不知道要在 top:50% 的基礎上上移多少距離，所以把 margin-top:-50px 改成 transform: translateY(-50%);

3. 水平垂直居中方案

3.1 已知高度和寬度的元素

方法一：

設置父元素：

.parent{
    position: relative;
}

設置目標元素：

div{
    position:absolute;
    width:100px;
    height: 100px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

Tip):這段代碼比較優美和靈活。原理實際上是：子元素依然相對於父元素定位，可是因爲 top:0 和 bottom:0 沒法同時知足，且該元素的 margin 又是自適應，所以最終變成了由上下外邊距平分尺寸，從而達到垂直居中。至於水平居中，原理也是同樣。

方法二：

設置父元素：

.parent{
    position: relative;
}

設置目標元素：

div{
    position:absolute;
    width:100px;
    height: 50px;
    top: 50%;
    left:50%;
    margin-top: -25px;
    margin-left: -50px;
}

Tip)：原理和 2.3 其實同樣，只是如今多了一個水平方向的居中。看下圖：

3.2 未知高度和寬度的元素

設置父元素：

.parent{
    position: relative;
}

設置目標元素：

div{
    position:absolute;
    width:100px;
    height: 50px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

Tip): 原理和 2.4 同樣，不一樣的是咱們如今不知道子元素高度和寬度，也就不知道要在 top:50% 和 left:50% 的基礎上再移動多少距離，所以把 margin-top:-25px 和 margin-left:-50px 對應改成 transform: translateY(50%，50%);

3.3 任意元素

3.3.1 利用彈性佈局一

設置父元素：

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

3.3.2 利用彈性佈局二

設置父元素：

.parent{
    display: flex;
}

設置子元素：

div{
    margin: auto;
}

3.3.3 利用網格佈局一

設置父元素：

.parent{
    display: grid;
}

設置子元素：

div{
    justify-self:center;
    align-self:center;
}

3.3.4 利用網格佈局二

設置父元素：

.parent{
    display: grid;
}

設置子元素：

div{
    margin: auto;
}

3.3.5 利用僞元素

設置父元素

.parent {
    font-size: 0;  /* 消除空隙 */
    text-align: center;  /* 實現水平居中*/
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}

設置子元素

div{
  display: inline-block;
  vertical-align: middle;
}

參考：

https://segmentfault.com/a/1190000003761600

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92

本文分享自微信公衆號 - 漫遊前端世界（gh_6ac344b74a01）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。