使不知宽高的元素水平垂直居中的方法

       本文主要介绍如何使元素居中显示的几种方法，当然方法有很多，现在记录的不过是笔者目前能够想到的几种：定位、table-cell、增加空span、弹性盒模型。

       html样式如下：

<div class="box">
    <div class="box1"></div>
</div>

     css样式如下：

.box{
    width:600px;
    height:600px;}

    类名为.box1的div宽高未定。

   方法一(定位）

.box{
    width:600px;
    height:600px;
    position:relative;
}
.box1{
   position:absolute;
   left:50%;
   top:50%;
  transfrom:translate(-50%,-50%);
}

  方法二（table-cell）

.box{
   width:600px;
   height:600px;
   display:table-cell;
   text-align:center;
   vertical-align:middle;
}
   .box1{
   display:inline-block;
   vertical-align:top;
}

 方法三（给box中增加一个空span）

<div class="box">
    <span></span>
    <div class="box1"></div>
</div>

.box{
  width:600px;
  height:600px;
  }
.box span{
 display:inline-block;
vertical-align:middle;
height:100%;
}
.box1{
 display:inline-block;
 vertical-align:middle;
}

   方法四(弹性盒模型）

.box{
 width:600px;
height:600px;
display:flex;
justify-content:center;
align-items:center;
}