html - 如何让两个 div 垂直居中并让它们的背景填充浏览器

Question

我有两个 div，但它们在顶部，我希望它们在中间，而且每个都有一个背景颜色，我想填充它们的一半屏幕。

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
}

.español {
  background: red;
}

.english {
  background: blue;
}

a {
  text-decoration: none;
}

<div class="contenedor">
  <div class="español">
    <a href="/es">Español</a>
  </div>
  <div class="english">
    <a href="/en">English</a>
  </div>
</div>

我该怎么做呢？

A picture says more than a thousand words

谢谢!

Answer 1

您的代码中可以添加很多东西。如果您想使用 flex(就像您对容器所做的那样)，请对元素使用以下设置:

html,
body {
  height: 100%;
  margin: 0;
}

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
  height: 100%;
}

.contenedor>div {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.español {
  background: red;
}

.english {
  background: blue;
}

a {
  text-decoration: none;
  color: white;
}

<div class="contenedor">
  <div class="español">
    <a href="/es">Español</a>
  </div>
  <div class="english">
    <a href="/en">English</a>
  </div>
</div>