CSS之实现元素居中（水平居中+垂直居中）的多种方法

知道原理的同学可以直接跳过这部分，下面有代码展示。
不懂原理的同学还是希望您可以看看，毕竟授人以鱼不如授人以渔嘛，也希望您可以终身学习。

元素实现居中的知识铺垫：

原理：
1.父级元素设置相对定位 position: relative; (绝对定位也可以)
2.要实现居中的子元素 （不一定要直接子元素） 设置绝对定位 position: absolute;然后子元素的位置 在水平方向和垂直方向的正方向 先平移父级宽度和高度的一半（即：top: 50%; left: 50%）,然后子元素在通过设置margin值，使自身 在水平方向和垂直方向的负方向 平移子元素自身宽度和高度的一半。
3.完成居中样式

因为绝对定位position: absolute; 是相对于HTML结构上 最近的 有定位的父级进行定位的，所以父级设置绝对定位还是相对定位，就取决于您产品的需求了。

大家可能会有疑问： 什么是水平方向和垂直方向的正方向和负方向？
我们看看下面的图，你就会明白：
x轴： 水平方向
y轴： 垂直方向 （特别注意： 正方向使垂直向下的）
z轴：从电脑屏幕指向我们人的方向

代码如下：
html结构都是一样的,如下：

	<div class="wrapper">
		<div class="box"></div>
	</div>

方法一：

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	/*position: relative;*/
	position: absolute;
}

.wrapper .box {
	background-color: #94f0d2;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 100px;
	margin-top: -50px;
	margin-left: -100px;
	
}

结果展示：下面的结果展示都一样的

方法二：

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	/*position: relative;*/
	position: absolute;
}

.wrapper .box {
	background-color: #94f0d2;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 100px;
	transform: translate(-50%, -50%);
}

方法三：

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	/*position: relative;*/
	position: absolute;
}

.wrapper .box {
	background-color: #94f0d2;
	position: absolute;
	left: calc(50% - 100px);
	top: calc(50% - 50px);
	width: 200px;
	height: 100px;
	
}

方法四：

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	position: relative;

}

.wrapper .box {
	background-color: #94f0d2;
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;	
	
}

方法五：flex 布局

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .box {
	background-color: #94f0d2;
	width: 200px;
	height: 100px;
	
}

方法六：单纯实现水平居中（inline-block + text-align）
这个结果展示和上面不一样，还请各位移步看下图：

.wrapper {
	background: #4b63c5;
	width: 500px;
	height: 300px;
	text-align: center;
}

.wrapper .box {
	background-color: #94f0d2;
	width: 200px;
	height: 100px;
	display: inline-block;
	
}

结果展示：

谢谢各位同学的阅读，文章如果错误，麻烦及时在评论区联系我矫正，谢谢各位不吝赐教，一起交流进步成长。