根据元素标签的性质，可以分为：

  • 内联元素居中布局

  • 块级元素居中布局

    内联元素居中布局

    水平居中

  • 行内元素可设置：text-align: center

  • flex布局设置父元素：display: flex; justify-content: center

垂直居中

  • 单行文本父元素确认高度：height === line-height

  • 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle

    块级元素居中布局

    水平居中

  • 定宽: margin: 0 auto

  • 绝对定位+left:50%+margin:负自身一半

垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差