div水平垂直居中的方法

描述：现有html结构如下，实现child在parent中水平垂直居中。

<div class="parent">
  <div class="child"></div>
</div>

方法一：flex

.parent {
    display: flex;
    justify-content: center; //水平居中
    align-items: center; //垂直居中
}

或：

.parent{
  	display:flex;
}
.child{
 	margin:auto;
}

方法二：定位+margin

说明：这种方法适用于子元素明确宽高的情况。
原理：绝对定位left 50%使得div.child左边缘位于容器的水平方向的中间位置，同理top 50%使得div.child上边缘位于容器的竖直方向的中间位置。因此水平方向往左平移div.child元素宽度的一半，竖直方向往上平移div.child元素高度的一半就可以了。

.parent {
    position: relative; 
}
.child{
	position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -250px;
    width: 500px;
    height: 500px;
}

方法三：定位+transform

原理：同方法二

.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}