转载：　　

http://blog.csdn.net/freshlover/article/details/11579669

做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的 垂直居中的几种方法 整理下。

结构

<div class="box box1"><span>我是垂直居中元素</span></div>

方法1：dispaly:table-cell

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

方法2：display:flex

.box2{  display:flex;  justify-content:center;  align-items:center;   text-align:center;}

方法3：translate(-50%,-50%)

.box3{ position:relative;}.box3 span{  position:absolute;   left:50%;   top:50%;   -webkit-transform:translate(-50%,-50%);   width:100%;   text-align:center;}

方法4：display:inline-block

.box4{  text-align:center;   font-size:0;}.box4 span{  vertical-align:middle;   display:inline-block;   font-size:16px;}.box4:after{  width:0;  height:100%;  display:inline-block;  vertical-align:middle;}.box4:after{  content:''}

方法5：margin:auto

.box5{   display:flex;   text-align:center;}.box5 span{  margin:auto;}

方法6：display:-webkit-box

.box6{  display:-webkit-box;  -webkit-box-pack: center;  -webkit-box-align: center;   text-align:center;}

2，5，6实际都是flexbox的方法，flexbox兼容比较麻烦，布局可以参考。

3需要定位，4需要有参照物，最简单的还是table的方法。