DIV + CSS 设置水平垂直居中方法

之前写前端页面经常会遇到这个问题，所以抽了个时间总结了一下这些常用的方法，通常分为两种情况来设置：已知宽高和未知。简单的分享一下经验。

（一）已知宽高情况的设置

1. position：absolute;，margin：auto;使用position的绝对定位和margin的居中定位 ，四个方向位置距离设置成一样就行了（通过填充父元素的可用空间 ，子元素设定了宽高，那么多余的空间，被margin：auto平均分配的原理）：

   //html代码
     <div class="box1">
            <div class="box2">div+css设置水平垂直居中显示</div>
    </div>
    //css样式代码
        .box1 {
        width: 400px;
        height: 400px;
        margin: auto;
        border: 1px solid red;
                /* 位置值设置相等即可*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
    }

   运行结果：

2. 设置 使用position的绝对定位和margin的居中定位，top和left设置与屏幕相距成50%，然后用transform向左（上）平移它自己宽度（高度）的50%即可：

       .box1 {
        width: 400px;
        height: 400px;
        margin: auto;
        border: 1px solid red;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
    }

运行结果一样。 3. 设置 使用position的绝对定位和margin的居中定位，top和left设置与屏幕相距成50%，使用margin:高的一半px 0 0 宽的一半px; 即可：

    .box1 {
     width: 400px;
     height: 400px;
     margin: auto;
     border: 1px solid red;
     top: 50%;
     left: 50%;
     position: absolute;
     margin: -200px 0 0 -200px;
 }

（二）未知元素宽高

这里是使用了两个div的class为box1和box2，方便区别显示，主要设置box2来显示；

1. 通过position的绝对定位和固定定位left和top都设置相对屏幕的50%距离，然后使用transform的translate负偏移来显示：

   //html
       <div class="box1">
        <div class="box2">div+css设置水平垂直居中显示</div>
    </div>
    //css
        .box2 {
        border: 5px solid green;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
   
    }

   运行结果：

2. 通过css设置父元素为display: table，子元素为 display: table-cell，这种方法是让元素包含的内容居中，但是会占据整个父元素，因为子元素没有设置宽高的，如下所示（红线方框是设置宽高的父元素）：

3. 最实用的方法：css3新的布局方法——弹性布局 display: flex。在这个方法中，不管是在已知或未知元素宽高的情况下，都能使元素居中显示（推荐使用）。

//css
.box1 {
        width: 400px;
        height: 400px;
        margin: auto;
        border: 5px solid red;
        display: flex;
        align-items: center;/*垂直居中*/
        justify-content: center;/*水平居中*/

    }
    .box2 {
        border: 5px solid green;
    }

运行结果：