垂直居中布局两种经典方式原因是浏览器不会计算页面高度。当你设置height：100%，如果父级元素是body是无效的，

table-cell&vertical-align

parent设置display：table-cell 和 vertical-align：middle

优缺点

兼用性好，vertical-align会污染子元素样式

display再补课

table：设置当前元素为table元素（表格）
table-cell：设置当前元素为td元素（单元格）

vertical-align补课

top middle bottom
用于单元格等元素的设置内容垂直方向的对齐方式

这种方法就相当于把parent设置成一个单元格，来设置垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直居中布局</title>
		<style type="text/css">
			#parent {
				width: 200px;
				height: 600px;
				background: #ccc;
				display: table-cell;
				vertical-align: middle;
			}

			#child {
				width: 200px;
				height: 200px;
				background: #c9394a;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child">
				水平居中
			</div>
		</div>
	</body>
</html>

height:100%补课

如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度，但是如果你设置高度为height：100%，那么这元素的高度不会立即扩展到整个窗口的高度，原因是浏览器不会计算页面高度。

当你设置height：100%，如果父级元素是body是无效的，如果父级元素是其他元素，该元素会撑满整个父元素的高度。

absolute&top&transfrom

parent和child都设置absolute child设置top:50 transfrom:translateY(-50%)

优缺点

parent是否脱离文档流，不影响子级元素的水平居中效果；但是transfrom属于css3中的属性，老浏览器不支持。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直居中布局</title>
		<style type="text/css">
			#parent {
				width: 200px;
				height: 600px;
				background: #ccc;
				position: absolute;
			}
			
			#child {
				width: 200px;
				height: 200px;
				background: #c9394a;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child">
				水平居中
			</div>
		</div>
	</body>
</html>