DIV水平垂直居中的终极解决方案（看这篇就够了）

DIV水平垂直居中的终极解决方案

  网上关于div水平垂直居中的文章层出不穷，对于div水平垂直居中的方法最多可至七八种，经过笔者对于一些大厂的网站的源码进行查看和研究发现他们所用到的方法无外乎以下几种，所以小伙伴们在以后的实际开发的过程中或者面试的过程中再涉及到div水平垂直居中的问题时可以参考以下方法。

代码示例：

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

方法1（Flex布局）：

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

方法2（Flex布局）：

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

方法3（绝对定位，未知子元素宽高）：

.parent {
    position:relative
 }
 .child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    -ms-transform:translate(-50%, -50%);         //IE9
    -webkit-transform: translate(-50%, -50%);    //Google、Safari
}

方法4（绝对定位，已知子元素宽高）：

.parent {
    position:relative
 }
 .child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

方法5（绝对定位，已知子元素宽高）：

.parent {
    position:relative
 }
 .child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}

方法6（Gird布局，只作为了解，主流框架均有实现）：

.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}

特殊说明1：

  想必大家一定会问，上面写了6种方法，实际开发的过程中到底该用哪一种？我的答案是要结合实际，灵活使用。在这要注意的是，方法1 方法2 方法3 使用的时候要注意浏览器的兼容性问题，可以参考笔者的写法加一个前缀，这样就可以解决掉不同浏览器的兼容问题。

特殊说明2：

  对于一些前端小白来说，可能对于方法3中的transform和translate
会有些许陌生，所以笔者在这里解释一下transform属性的用法以及使用方法3进行水平垂直局中的原理。
transform：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform属性详解以及示例
方法3原理：
当使用：top: 50%;left: 50%的时候是以（child的）左上角为原点，所以child整体并未处于中心位置，translate(-50%,-50%) 是将child往上（x轴）,左（y轴）移动自身（child）长宽的 50%，这样便处于了中心位置。感兴趣的同学可以自己研究一下其它方法的原理。

注：欢迎大家在评论区提出想法和意见，让我们在探讨中进步！