【前端CSS】Html元素垂直对齐与水平的对齐的三种方式

作者：System 时间：2024年08月19日分类：所有,html 字数：593

在CSS中，可以通过多种方式实现HTML元素的垂直对齐和水平对齐。以下是三种常用的方法：




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}




.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}




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

HTML结构：




<div class="container">
  <div class="child">居中内容</div>
</div>

每种方法都可以实现子元素在容器中水平和垂直居中，选择哪种方法取决于项目需求和个人喜好。