水平居中
inline元素用text-align:center
block元素用margin:0 auto;
垂直居中
Flex弹性盒子
Flex弹性盒子应该是解决垂直居中的最佳方案
main{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
给需要垂直居中的元素的父容器设置display:flex，并指定align-items: center
另外justify-content和flex-direction用于调整这两个子元素水平居中的排列顺序。
absolute绝对定位
思路：设成absolute后，指定top和left为50%，将元素的左上角定位点放到页面正中心。然后用负值margin一半的元素宽高度将元素拉回页面正中心
main{
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
}
缺点：
缺点是你需要事先指定元素的width和height，否则无法给负margin设值，显得不够灵活。其实不必固定元素的宽高，改用translate()位移来替代负margin，实现将元素拉回页面正中心。
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
用绝对定位absolute让需要垂直居中的元素脱离文档流，指定top和left各50%将元素左上角定位点设到页面正中心。然后用translate()各负50%，将元素拉回页面正中心。思路和负margin是一致的，优势是不必固定元素的宽高了。缺点是absolute绝对定位威力太大，要考虑是否会对页面布局造成影响。
line-height
元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。
<div class="vertical">content</div>
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}
优点：
适合在所有浏览器，没有足够空间时，内容不会被切掉
缺点：
仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。
