css垂直居中的三种实现

1.基于绝对定位

它要求元素具有固定的宽度和高度。

main{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3em;    /* 6/2 = 3 */ 
  margin-left: -9em;     /* 18/2 = 9   */ 
  width: 18em;
  height: 6em;
}
或者
main{
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}

显然，这个方法最大的局限在于它要求元素的宽高是固定的。在通常情 况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。

如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题 就迎刃而解了!遗憾的是，对于绝大多数 CSS 属性(包括 margin)来说， 百分比都是以其父元素的尺寸为基准进行解析的。

当我们在 translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度 为基准进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于 百分比的 CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸 写死了。这样我们就可以彻底解除对固定尺寸的依赖问题了。

2.基于transform

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #655;
}

body {
	background: #fb3;
}

3. 基于 Flexbox 的解决方案

请注意，当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元 素居中，垂直方向上也是如此

body {
	display: flex;
	min-height:200px;
}
main {
	margin: auto;
	background: #655;
}

4.display:table-cell

父级元素设置display:table-cell;此元素会作为一个表格单元格显示，类似td,th

div.parent{
  display:table-cell;
  vertical-align: middle; 
  text-align: center;
}

5.基于视口单位的解决方案

这个方法目前很有局限性，不做介绍啦。

如果有更多的实现方式，欢迎补充~~~。