垂直居中
- 使用计算方式实现
main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
- 使用CSS3的 transform。可以在transform中的translate()使用百分比，让元素移动相对于自身的宽度和高度
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
一个小例子：div里有另一个div，你需要垂直居中，那么就给里面的div设置以上属性，然后给父div设置relative（不脱离文档流，但top等有效）
缺点：
绝对定位通常不是一个很好的方法，对整体布局影响太大
- 视窗单位解决方案
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
有用性是有极限的，因为它只适用于元素在视窗中垂直居中
- Flexbox解决方案：在需要垂直居中的父元素上设置display:flex和在垂直居中的元素上设置margin:auto
body {
display:flex;
}
main {
margin: auto;
}
