CSS DIV垂直居中

随便记录

是因为，用CSS3的动画translate来设置垂直居中 

css垂直居中有很多种方式

当前最流行的使用方法：

.parent {position:relative;}

.box {position:abosolute; left:50%;top:50%; margin-left:-宽度/2 -(box.offsetWidth/2); margin-top:-高度/2-(box.offsetHeight/2)};

 

最简单的方法:

内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，加上top: 50%; left: 50%;

.box{ width: 50%;  margin: auto;  position: absolute;    top: 50%; left: 50%;   

　　-webkit-transform: translate(-50%,-50%);  

  　　   -ms-transform: translate(-50%,-50%);  

    　　       transform: translate(-50%,-50%);  }