水平居中

行内元素的居中

父元素text-align: center;

块级元素居中

指定宽度后，设置margin: auto。

width: 100px; margin: 0 auto;

垂直居中

行内元素居中

设置line-height与height相等。

块级元素居中

• flex
• 已知高度
  • 用CSS3的新属性calc，计算top，top: calc(50% - 50px);
  • 用top + margin-top实现

position: relative;
height: 100px;
margin-top: 50%;
top: -50px;

• 未知高度：用margin-top: 50%; + translate: -50%实现

参考文章

css居中div的几种常用方法