css 垂直居中

css 居中 网上很多很多。
这里三个方法，只是我觉得容易理解的。

方法一：负边距

<div class="middle"></div>

.middle{    
  /*必须要有宽高*/    
  width: 100px;    
  height: 100px;    
  background-color: red;    
  /*绝对定位*/    
  position: absolute;    
  /*增对左顶点居中，整体不居中*/    
  left:50%;    
  top:50%;    
  /*用margin使得整体得到居中*/    
  margin-left: -50px;    
  margin-top: -50px;}

总结：对有固定宽高的元素较为使用，以左上角点进行居中，然后进行margin处理，使得整体居中。

方法二：margin:auto;

<div class="middle"></div>

.middle{    
/*必须要有宽高*/    
width: 100px;    
height: 100px;    
background-color: red;    
 /*关键点*/  
margin:auto;    
/*绝对定位*/   
position: absolute;    
top:0;    
left:0;    
bottom:0;    
right:0;

参考资料：http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
然并卵,作者最后也没解释原理=-=。这里我也不是很理解，只知道这种布局方式的关键点是<code>margin:auto</code>。

方法三：table
看了半天，好像一定要指定一个父元素，然后基于这个父元素做垂直居中，待我仔细研究研究。

很多方法，不敢写，因为自己不是怎么理解。等以后慢慢添。