CSS 水平,垂直,水平垂直居中方案——持续更新

作者：System 时间：2024年08月21日分类：所有,css 字数：570

以下是CSS实现元素水平、垂直、水平垂直居中的几种方法：




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




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




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




.center-margin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这些方法可以根据不同的布局场景和浏览器兼容性需求选择使用。