CSS-3.水平垂直居中的方案 可以实现6种以上并对比它们的优缺点

水平垂直居中的方案
可以实现6种以上并对比它们的优缺点

父、子元素宽高未知时：

①flex布局

②绝对定位+transform (定位的上、左为 50%，translate 上、左负 50%)

③绝对定位+margin:auto

④直接使用table

⑤Grid网格布局

.parent {
  display: grid;
}
.children {
  align-self: center;
  justify-self: center;
}

还有一种是

table-cell

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.children {
  display: inline-block;
}

 

父、子元素宽高已知时

⑥absolute + calc（定位上、左负50%时减去子元素宽、高)

⑦absolute + 负margin（定位的上、左为 50%，margin 的上、左负子元素的一半

 

优缺点：

1.PC段有兼容性要求，宽高固定，推荐用absolute+margin

2.PC有兼容要求，宽高不固定，推荐用css-table

3.无兼容要求- 推荐用flex

4.移动端推荐用flex