css样式实现内容的垂直居中：
一：不定高
1：存在兼容性问题，低版本的火狐，对于display：flex的不兼容
display:flex;
justify-content:center;
align-items:center;
2：同样存在兼容性问题
display: table-cell；
vertical-align: middle；
3：
父元素的position：relative
position:absolute
top: 50%；
transform: translateY(-50%)；
4.
父元素的position：relative
position: absolute;
top:50%
left:50%
margin-left: -（width/2）
margin-top: -(height/2)
/* 方式二：垂直居中 */
.content{
200px;
height: 500px;
border:1px solid red;
position: relative;
}
.content div{
50px;
height: 50px;
border:1px solid;
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
/* 方式三：垂直居中 */
.content{
200px;
height: 500px;
border:1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.content div{
50px;
height: 50px;
border:1px solid;
}
http://blog.csdn.net/freshlover/article/details/11579669 有介绍8种垂直居中的方法，但是还未尝试。记录一下