如何只用CSS做到完全居中

transform法

　　和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

.is-Transformed { 
  width: 50%; 
  margin: auto; 
  position: absolute; 
  top: 50%; left: 50%; 
  -webkit-transform: translate(-50%,-50%); 
      -ms-transform: translate(-50%,-50%); 
          transform: translate(-50%,-50%); 
}

好处：

　　内容高度可变

　　代码量小

同时注意：

　　不支持IE8

　　需要写厂商前缀

　　会和其他transform样式有冲突

　　某些情况下的边缘和字体渲染会有问题

table-cell法

　　这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。

<div class="Center-Container is-Table"> 
  <div class="Table-Cell"> 
    <div class="Center-Block"> 
    <!-- CONTENT --> 
    </div> 
  </div> 
</div>

.Center-Container.is-Table { display: table; } 
.is-Table .Table-Cell { 
  display: table-cell; 
  vertical-align: middle; 
} 
.is-Table .Center-Block { 
  width: 50%; 
  margin: 0 auto; 
}

好处：

　　内容高度可变

　　内容溢出则能自动撑开父元素高度

　　浏览器兼容性好

同时注意：

　　需要额外的HTML标签

Flexbox法

　　CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。

好处：

.Center-Container.is-Flexbox { 
  display: -webkit-box; 
  display: -moz-box; 
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: flex; 
  -webkit-box-align: center; 
     -moz-box-align: center; 
     -ms-flex-align: center; 
  -webkit-align-items: center; 
          align-items: center; 
  -webkit-box-pack: center; 
     -moz-box-pack: center; 
     -ms-flex-pack: center; 
  -webkit-justify-content: center; 
          justify-content: center; 
}

　　内容可以是任意高宽，溢出也能表现良好

　　可以用于各种高级布局技巧

同时注意： 不支持IE8-9

　　需要在body上写样式，或者需要额外容器

　　需要各种厂商前缀兼容现代浏览器

　　可能有潜在的性能问题