面试题之常考：css 水平垂直居中 常见方法

总结：

• 已知宽高

1. absolute + 负margin
2. absolute + margin auto
3. absolute + calc

• 未知宽高

1. flex
2. absolute + transform
3. inline-block + vertical-align(冷门)
4. table-cell
5. line-height + text-align
6. grid

 

已知宽高(指的是content的宽高)：

html：

<div class="box">
    <div class="content">
        水平垂直居中
    </div>
</div>

css:

1、利用position和margin(往上和左移动自身的一半)(外容器需要给定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }

2、利用margin:auto和position(外容器需要给定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        left:0;
        bottom: 0;
        margin: auto;
    }

未知宽高(指的是content的宽高)：

1、利用position和transform(外容器需要给定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

2、利用flex布局(外容器不需要给定高度)（content如果不设置宽度的话，宽度为百分百）

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .content{
        width: 100px;
        background: red;
    }

3、利用inline-block和vertical-align实现

首先来看一个例子：一个box中有两个content，把两个content设置成行内块并且垂直方向居中对齐，把第一个content的高设为100%，这样第二个content可以实现垂直居中，在box中设置text-align水平居中对齐，因为content是行内块所以会水平居中

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        text-align: center;
    }
    .content1{
        background: green;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .content2{
        background: red;
        display: inline-block;
        vertical-align: middle;
    }  
  
    <div class="box">
        <div class="content1">
            辅助作用
        </div>
        <div class="content2">
            水平垂直居中
        </div>
    </div>

结果如图所示

根据以上，如果我们把content1的内容设置为空，因为inline-block元素会有空白间距，我们用往左移动0.25em解决，这样就可以实现content2为水平垂直居中了

我们可以利用.box:before来写content1这个空元素

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        text-align: center;
    }
    .box:before{
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -0.25em;
    }
    .content2{
        background: red;
        display: inline-block;
        vertical-align: middle;
    }

    <div class="box">
        <div class="content2">
            水平垂直居中
        </div>
    </div>

以上就实现了水平垂直居中，但是content2是一个行内块元素，如果内容过长等于100%的时候会换行，所以建议宽度小于100%

4、利用table-cell布局(不建议用)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .content{
        display: inline-block;
        background: red;
    }

5、利用line-height和text-align

.box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.content {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left;
}