居中

基本原理

内联盒子

水平居中

• 行级内容可设置

[element] {
  text-align: center;
}

• 弹性布局可设置父级元素

[element] {
  display: flex;
  justify-content: center;
}

垂直居中

• 单行文本 父元素高度确定

[element] {
  height: [line-height];
}

• 多行文本 父元素高度确定

[element] {
  display: table-cell;
  vertical-align: middle;
}

块级盒子

水平居中

• 固定宽度：margin: 0 auto

垂直居中

• 高度固定 + position: absolute + left、top、margin-left、margin-top
• 高度固定 + position: fixed + margin: auto
• display: table-cell
• transform: translate(x, y)
• 弹性布局 flex
• 网格布局 grid

具体案例

固定宽高

不固定宽高

图片定高或不定高垂直水平居中