CSS实现水平垂直居中的方法

基础的HTML和CSS代码如下：

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

.content {
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
.box {
	width: 100px;
	height: 100px;
	background-color: orange;
}

absolute + 负margin

绝对定位元素是从父元素的padding边界开始计算偏移，偏移属性的值为百分比时，偏移量 = 父元素的宽度或高度 * 百分比。
子元素设置top，left设置为50%后，只会让子元素的左上角处于父元素的中心。可以通过设置子元素的外边距为负值（宽、高的一半）来实现子元素的居中。
这种方式兼容性很好，缺点是需要知道子元素的宽高。

.content {
	position: relative;
}
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

absolute + margin: auto

这种方式兼容性也很好，缺点是子元素的宽高必须固定。

.content {
	position: relative;
}
.box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

absolute + calc函数

CSS3引入了calc()函数，用来动态计算长度值，需要注意的是：运算符前后都需要加上空格。
这种方法的原理和第一种差不多。
这种方式兼容性依赖于calc函数的兼容性，缺点是需要知道子元素的宽高。

.content {
	position: relative;
}
.box {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

absolute + transform

这种方法用到了CSS3的transform变换。
这种方法的原理和第一种也差不多。
这种方式兼容性依赖于translate的兼容性。

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

display: table-cell

table元素可以用来实现水平垂直居中。
这种方式兼容性较好。

.content {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.box {
	display: inline-block;
}

flex

CSS3的flex布局，这应该是实现水平垂直居中最简单的方法。
移动端已经完全可以使用flex了。

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

flex + margin: auto

上面使用的 justify-content: center 和 align-items: center 会使父元素中的所有子元素都垂直居中。如果我只想让指定的元素水平垂直居中，可以给父元素设置 display: flex ，再给需要水平垂直居中的元素设置 margin: auto ，就能让指定的元素在剩余空间中实现水平垂直居中。

<div class="content">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

.content {
    display: flex;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}
.box1 {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: orange;
}
.box2 {
    width: 50px;
    height: 100px;
    background-color: pink;
}

总结

方法	居中元素宽高是否需要固定
absolute + 负margin	✓
absolute + margin: auto	✓
absolute + calc函数	✓
absolute + transform	✖
display: table-cell	✖
flex	✖

比较各方法的优缺点，总结如下：

• PC端有兼容性要求，宽高固定，推荐 absolute + 负margin
• PC端有兼容性要求，宽高不固定，推荐 display: table-cell
• PC端无兼容性要求，推荐 flex
• 移动端推荐 flex

参考文章：https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center