html上下左右四个div盒子布局

可以使用 CSS 的 `flex` 属性来实现上下左右四个 `div` 盒子的布局。

HTML 代码如下：

<div class="container">
  <div class="box top"></div>
  <div class="box left"></div>
  <div class="box center"></div>
  <div class="box right"></div>
  <div class="box bottom"></div>
</div>

CSS 代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
}

.top {
  order: 1;
}

.left {
  order: 2;
}

.center {
  order: 3;
}

.right {
  order: 4;
}

.bottom {
  order: 5;
}

解释一下上面的 CSS 代码：

- `.container`：使用 `flex` 属性实现布局，`flex-wrap` 属性设置为 `wrap`，使得子元素可以换行；`justify-content` 属性设置为 `center`，使得子元素在水平方向上居中对齐；`align-items` 属性设置为 `center`，使得子元素在垂直方向上居中对齐；`height` 属性设置为 `100vh`，使得容器高度占满整个视口。
- `.box`：设置子元素的宽高。
- `.top`、`.left`、`.center`、`.right`、`.bottom`：通过 `order` 属性来控制子元素的顺序，从而实现上下左右四个盒子的位置。其中，`.center` 的 `order` 属性设置为 `3`，使得它在中间。其他四个盒子的 `order` 属性可以根据需要调整。