未知宽高元素水平垂直居中对齐的四种方式 | 定位 | flex布局 | grid布局 | table-cell

作者：System 时间：2024年08月14日分类：所有,css3 字数：610

这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。

以下是实现未知宽高元素水平垂直居中的四种方法：




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}




.parent {
  display: grid;
  place-items: center;
}




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

每种方法都有其优缺点，选择合适的方法取决于具体的使用场景和兼容性需求。