css3垂直居中的几种方法

记录一下新学到的几种css3垂直居中的方法，依然写几枚例子来说明：

<!--html部分-->
<div class=container>
   <p>让垂直居中来的更猛烈些吧^^</p>
</div>

方法一：

.container{
width:500px;
height:500px;
border:1px solid pink;/*为了直观就加了边框*/
position:relative;
}
p{
margin:0;
position:absolute;
top:50%;
left:50%
transform:translate(-50%,-50%);
border:1px solid pink;
}

方法二：

.container{
height:500px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid pink;
}
p{
margin:0;
}

方法三：

/*目前浏览器支持性还不太好 加前缀啊加前缀*/
.container{
width:500px;
height:500px;
border:1px solid pink;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
p{
margin:0;
}

方法四：

/*仅垂直方向*/
.container{
width:500px;
height:500px;
display:table-cell;
vertical-align:middle;
border:1px solid pink;
}
p{
margin:0;
}