面试题：让div水平垂直居中的多种方法

1. 通过flex布局

html, body {
	margin: 0;
	padding: 0;
	height: 100%;  //高度必须设置，否则垂直方向不居中
}
div.parent {
	display: flex;
	height: 100%;  //高度必须设置，否则垂直方向不居中
	justify-content: center;
	align-items: center;
}
div.child {
	width: 200px;
	height: 200px;
	background-color: red;
}

2. 绝对定位 + margin偏移

			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			div.parent {
				position: relative;
				height: 100%;
			}
			div.child {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -100px; //宽高的一半
				margin-left: -100px; //宽高的一半
			}

3. 绝对定位 + translate

			div.child {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);  //50%参照自身宽高
			}

4. 绝对定位 + margin:auto

			div.child {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

5. 使用 grid 布局

			div.parent {
				display: grid;  //父容器grid布局
				height: 100%;
			}
			div.child {
				justify-self: center;
				align-self: center;
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}

6. 伪元素

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}

原理（转载）：

设置inline-block和vertical-align:middle后，里面的元素会基于中间的文字准线居中对齐（学生时代的英语本子里面写字母，都是4条线形成三个空白区域，文字的对齐就是根据这几条线的）vertical-align更多信息可以看看张鑫旭博文； 然后，由于伪类是position:static(默认）的，那么伪类撑开了父元素的基准线（高度是100%），使得此时文字的基准线就是整个div.parent的中心了，另外vertical-align只影响inline或者inline-block的，所以div.child设置vertical-align就能居中了。