水平居中与垂直居中

水平居中

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、图片或者单行文本字段。