说道垂直居中，我们首先想到的是vertical-align属性，但是许多时候该属性并不起作用。例如，下面的样式并不能达到内容垂直居中显示
1 div { 2 width:200px; 3 height:300px; 4 border: 1px solid #000; 5 vertical-align: middle; 6 }
原来vertical-align属性仅能够作用于单元格或图像显示。因此要在上面样式内加入以下代码，才能够使文字或图像垂直居中：
1 display: table-cell;
但是IE浏览器并不能很好的支持display:table-cell，所以也就不能很好的支持vertical-align属性了。你可以使用以下方法巧妙地解决垂直居中：
1 div{ 2 line-height: 300px; 3 width: 200px; 4 height: 300px; 5 border: 1px solid #000; 6 }
通过定义单行文本的高度与行高相同，就能间接地实现文本垂直居中的问题。但是对于多行文本来说，这种方法就失效了。
下面说一下如何实现DIV在父元素中垂直居中
1、利用CSS3的transform属性对盒子进行移动实现，该样式定义在子元素上。代码如下：
1 div{ 2 border:1px solid #000; 3 width:300px; 4 height: 200px; 5 position: absolute; 6 top:50%; 7 left: 50%; 8 z-index: 3; 9 -webkit-transform:translate(-50%,-50%); 10 }
2、使用CSS3的flex布局实现，该样式定义在父元素上。代码如下：
1 .parent{ 2 border:1px solid #000; 3 width: 800px; 4 height: 500px; 5 justify-content: center; /*子元素水平居中*/ 6 align-items: center; /*子元素垂直居中*/ 7 display: -webkit-flex; 8 }
1 <div class="parent"> 2 <div style="100px;height: 100px;border:1px solid #ccc"></div> 3 </div>