CSS垂直居中的6种方式，最快只需2行代码

本文给出了6种利用CSS使HTML元素垂直居中与父元素的方法，其中包括：

1、2 绝对定位的方式

3 基于属性计算的方式（只需要2行代码哦）

4 利用vertical-align属性

5 盒子模型方式

6 基于内联元素特性

需要说一下下面的代码的打开方式，当启用一种方法时，请打开一种方法的注释，然后把其它方法注释掉，比如我想使用第2中最简单的方式，最终结果为：

    
    
    
 
 
 
     .wrapper{
  width: 500px;
  height: 500px;
  background-color: #666;
  
  overflow: hidden;
     }

     .box{
  width: 100px;
  height: 100px;
  background-color: red;
  
  margin: calc(50% - 50px) auto;
     }
 
    
    
    
 
    
    
    

好了，6种方法对应的总代码如下：

    
    
    
 .wrapper{
     width: 500px;
     height: 500px;
     background-color: #666;
     
     
     
     
     
     
     
     
     
     
     
     
     
 }

 .box{
     width: 100px;
     height: 100px;
     background-color: red;
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
 }