元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

127 阅读1分钟

根据元素标签的性质,可以分为:

  • 内联元素居中布局
  • 块级元素居中布局

内联元素居中布局

水平居中

  • 行内元素可设置: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(不定高,不定宽),兼容性相对比较差