css 水平垂直居中 常见方法

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

html：

    

        水平垂直居中
    

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;
    }  
  
    

        

            辅助作用
        
        

            水平垂直居中
        
    

结果如图所示

根据以上，如果我们把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;
    }

    

        

            水平垂直居中
        
    

以上就实现了水平垂直居中，但是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;
    }