源代码：

     
    
      
       Content here
      
     

.out{
        width: 300px;     height: 400px;     margin: 20px auto 0;    background:red; } .in{
        width: 100px;     height: 100px;     background: blue;     line-height: 100px; }

 

运行图：

 

1.使用表格法：

运行图： 

 

.out{
        display: table;     text-align: center; } .in{
      display: table-cell;   vertical-align: middle; }

 

 

缺点：子元素的会撑满父元素。

 

2.绝对定位计算:对子元素使用绝对定位，并分别移动上左50%，再分别margin-top:-50%height px,margin-left:-50%width px;

运行图：

 

.in{
       position: absolute;    top: 50%;    left: 50%;    margin-left: -50px;    margin-top: -50px;     }

 

缺点：需要对子元素的宽高固定，并且绝对定位容易影响布局。

 

 

 3.  利用绝对定位和translate。

同上，先左上各自移动50%,再使用transform: translate(-50%, -50%);translate是基于自身元素的宽高为基准进行移动的。

运行图同上。

.in{
       position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);  }

 

缺点：需要绝对定位。

 

4. 基于Flex.

运行图同上。

.out{
      display: flex; } .in{
       margin: auto;  }

 

优点：代码简单。

缺点：兼容性差。