如何用三个div分割屏幕

可以使用 display: flex 属性将三个 div 元素水平垂直居中。

HTML 代码：

<div class="container">
  <div class="left-div">...</div>
  <div class="center-div">...</div>
  <div class="right-div">...</div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置容器宽度和高度 */
  width: 300px;
  height: 300px;
}

.left-div {
  /* 设置 div 宽度和高度 */
  width: 100px;
  height: 100px;
  /* 添加 background-color 属性来展示 div 的颜色 */
  background-color: red;
}

.center-div {
  /* 设置 div 宽度和高度 */
  width: 100px;
  height: 100px;
  /* 添加 background-color 属性来展示 div 的颜色 */
  background-color: yellow;
}

.right-div {
  /* 设置 div 宽度和高度 */
  width: 100px;
  height: 100px;
  /* 添加 background-color 属性来展示 div 的颜色 */
  background-color: blue;
}

在这个例子中，.container 设置了 display: flex;，并且使用 justify-content: center; 和 align-items: center; 来水平垂直居中。这样，三个 div 元素就会在容器中水平垂直居中。