水平居中

行内元素的居中

父元素text-align: center;

块级元素居中

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

width: 100px; margin: 0 auto;

垂直居中

行内元素居中

设置line-heightheight相等。

块级元素居中

  • flex
  • 已知高度
    • 用CSS3的新属性calc,计算top,top: calc(50% - 50px);
    • top + margin-top实现
  1. position: relative;
  2. height: 100px;
  3. margin-top: 50%;
  4. top: -50px;
  • 未知高度:用margin-top: 50%; + translate: -50%实现

参考文章

css居中div的几种常用方法