DIV实现垂直居中的几种方法

说道垂直居中，我们首先想到的是vertical-align属性，但是许多时候该属性并不起作用。例如，下面的样式并不能达到内容垂直居中显示

  div {
      width:200px;
      height:300px;
      border: 1px solid #000;
      vertical-align: middle;
  }

原来vertical-align属性仅能够作用于单元格或图像显示。因此要在上面样式内加入以下代码，才能够使文字或图像垂直居中：

 display: table-cell;

但是IE浏览器并不能很好的支持display:table-cell，所以也就不能很好的支持vertical-align属性了。你可以使用以下方法巧妙地解决垂直居中：

   div{
     line-height: 300px;
     width: 200px;
     height: 300px;
     border: 1px solid #000;
   } 

通过定义单行文本的高度与行高相同，就能间接地实现文本垂直居中的问题。但是对于多行文本来说，这种方法就失效了。

下面说一下如何实现DIV在父元素中垂直居中

1、利用CSS3的transform属性对盒子进行移动实现，该样式定义在子元素上。代码如下：

  div{
     border:1px solid #000;
     width:300px;
     height: 200px;
     position: absolute;
     top:50%;
     left: 50%;
     z-index:;
     -webkit-transform:translate(-50%,-50%);
  }

2、使用CSS3的flex布局实现，该样式定义在父元素上。代码如下：

  .parent{
     border:1px solid #000;
     width: 800px;
     height: 500px;
     justify-content: center; /*子元素水平居中*/
     align-items: center; /*子元素垂直居中*/
     display: -webkit-flex;
  }

   <div class="parent">
       <div style="width:100px;height: 100px;border:1px solid #ccc"></div>
   </div>