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

說道垂直居中，咱們首先想到的是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在父元素中垂直居中

一、利用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  }

 

二、使用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>