DiV实现垂直集中的方式

最近一直在练习网页布局，总结了div用法中常用到实现垂直集中的三种方式，现在代码如下，和大家一一分享，有什么问题，大家可以在讨论区留言讨论，有不足之处，请多指教~

<div class="box">
        <div class="item">
        <p>itemitemitemitemitemitemitemitemitem</p>
        <p>itemitemitemitemitemitemitemitemitemitem</p>
        <p>itemitemitemitemitemitemitemitemitemitem</p>
        <p>itemitemitemitemitemitemitemitemitemitem</p>
        <p>itemitemitemitemitemitemitem</p>
        </div>
        boxCont
</div>

实现子元素div.item在父元素div.box里面的垂直居中

1. 方法一：已知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{width:200px;height:200px;border:1px solid #ff0000;}

直接使用position:absolute的方式进行定位，然后margin进行偏移，兼容性比较好，具体代码如下：

    .box{position:relative;}
    .item{
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;/*子元素宽的一半*/
        margin-top:-150px;/*子元素高的一半*/
    }

实现效果如下：

1. 方法二：未知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{border:1px solid #ff0000;}

还是需要使用position进行定位，然后用transform: translate(-50%,-50%);
至于translate如何实现垂直居中，可以查询w3c的基础教程，但是考虑到兼容性，以下代码是兼容性比较强的写法

    .box{position:relative;}
    .item{
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%); /* for Chrome  Safari */
        -moz-transform: translate(-50%, -50%);/* for Firefox */
        -ms-transform: translate(-50%,-50%); /* for IE */
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);      
    }

以下是实现效果：

1. 方法三：未知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{border:1px solid #ff0000;}

使用display：flex的方式，Flex意为弹性布局，相对于传统的盒子模型，可以更好地响应式的处理好网页布局。这里只讲Flex是如何实现垂直居中的。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
使用flex实现垂直居中的代码实现如下：

  .box{
    display: flex;
    justify-content: center;
    align-items: center;
}

兼容性比较强的写法如下：

.box{
    display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

实现效果一样

方法四：
使用display: inline-block;

.box{width:600px;height:600px;border:1px solid #ff0000;
  text-align: center;/*水平居中*/}
.item{border:1px solid #ff0000;}
  .box:after{display: inline-block;  
  vertical-align: middle; 
  content: '';
  height: 100%;
  }  
    .item{
    display: inline-block;  
  }