用CSS实现垂直水平居中的方法整理

html结构：

        垂直水平居中

CSS样式：

方法1：display:flex 

.box2{ 

     display: flex; 

     justify-content:center; 

     align-items:Center; 

}

方法2：table-cell

.box1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

方法3：绝对定位和负边距

.box3{position:relative;}

.box3 span{

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

        }

方法4：绝对定位和0

.box4 span{

      width: 50%; 

      height: 50%; 

      background: #000;

      overflow: auto; 

      margin: auto; 

      position: absolute; 

      top: 0; left: 0; bottom: 0; right: 0; 

}

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

.box6 span{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }