記錄水平垂直居中的多種方式和優缺點

前言

初級前端面試必考題，不少面試官都喜歡問這個問題。實習生的我面試遇到好幾回了，在這裏作一下總結。

水平垂直居中元素寬高固定

1.absolute + 負margin
2.absolute + margin auto
3.absolute + calc
複製代碼

水平垂直居中元素寬高不固定

1. absolute + transform
2. text-align + lineheight + vertical-align
3. css-table
4. flex
5. grid
複製代碼

公共Html代碼

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

公共Css樣式

.parent{
    border: 1px solid cadetblue;
    width:300px;
    height:300px; 
}
.child{
   height: 100px;
   width: 100px;
   background: cornflowerblue;   
}
複製代碼

1.absolute + 負margin

.child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
複製代碼

絕對定位的百分比是相對於父元素的寬高,top:50% left:50%是基於子元素的左上角偏移的，效果以下圖：

在使用子元素的外邊距爲子元素寬高一半的負值進行相反方向偏移就能夠讓子元素居中了。

2.absolute + margin auto

.child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

設置各個方向的距離都是0，margin設爲auto表明子元素到父元素上下、左右的距離相同，就能夠實現水平垂直居中了。

3.absolute + calc

.child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
複製代碼

css3的計算屬性，top、left的百分比是基於元素的左上角偏移，那麼在減去自身一半的寬高就行了。

4.absolute + transform

.child{
    height: 100px;
    width: 100px;
    background: cornflowerblue;     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

transform的translate屬性也能夠設置百分比，其是相對於自身的寬高，因此translate設置爲（-50%,-50%)，就能夠作到水平垂直居中了。

5.text-align + lineheight + vertical-align

父元素添加樣式

text-align: center;
 line-height: 300px;
複製代碼

子元素添加樣式

display: inline-block;
 vertical-align: middle;
複製代碼

middle：元素上下邊的中心點和行基線向上1/2x的高度位置對齊。

圖中的紅線是我認爲的行高基線（這個知識點不太熟...）

6.css-table

.parent{
        border: 1px solid cadetblue;
        width:300px;
        height:300px; 
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .child{
        height: 100px;
        width: 100px;
        background: cornflowerblue;     
        display: inline-block;
    }
複製代碼

7.flex

這是我最經常使用的一種方式，flex佈局除了水平垂直居中外還有不少屬性能夠了解。

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

8.grid

css新出的網格佈局 ，兼容性不太好。

.parent {
    display: grid;
}
.child {
    align-self: center;
    justify-self: center;
}
複製代碼

總結

1. PC端有兼容性要求，寬高固定，推薦absolute + 負margin
2. PC端有兼容要求，寬高不固定，推薦css-table
3. PC端無兼容性要求，推薦flex
4. 移動端推薦使用flex