說道垂直居中，我們首先想到的是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="width:100px;height: 100px;border:1px solid #ccc"></div>
3   </div>

DIV實現垂直居中的幾種方法