制作一个div长度为100%居中，这个div下有两个高度相同，长度为页面50%的div，第三个是为这两个div下面，长度为前面两个div之和，四个div都居中

可以使用flex布局实现这个需求。HTML代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码如下：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.box {
  height: 100px;
  width: 50%;
  background-color: #ccc;
  margin: 10px;
}

.box:last-child {
  width: calc(100% - 40px);
}

解析：

- `.container` 使用 flex 布局，并设置 `justify-content: center` 和 `align-items: center` 居中；
- `.box` 设置高度为 100px，宽度为页面的 50%，背景色为 #ccc，margin 为 10px；
- `.box:last-child` 设置宽度为前两个 `.box` 的宽度之和，使用 `calc()` 计算表达式，减去两个 `.box` 的 margin，即 `calc(100% - 40px)`。