web前端设置div盒子居中

要将一个 `<div>` 盒子水平垂直居中，可以使用以下两种常见的方法：

方法一：使用 CSS 的 flexbox 属性

HTML 代码：

<div class="container">
  <div class="box">
    <!-- 内容 -->
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口的高度，使盒子居中显示 */
}

.box {
  /* 盒子样式定义 */
}

方法二：使用 CSS 的绝对定位和 transform 属性

HTML 代码：

<div class="container">
  <div class="box">
    <!-- 内容 -->
  </div>
</div>

CSS 代码：

.container {
  position: relative;
  height: 100vh; /* 设置容器高度为视口的高度，使盒子居中显示 */
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 平移自身宽高的一半，实现居中效果 */
  /* 盒子样式定义 */
}

以上两种方法都可以将 `<div>` 盒子居中显示在父容器中。你可以根据实际情况选择其中一种方法来使用。