html - 如何使用 HTML5 和 CSS3 垂直居中和对齐之后的所有内容？

Question

我试图将浏览器中心的第一个 div 及其下方的所有内容垂直对齐到 div 下方。

我可以将这两个 div 包装在另一个 div 和 centering 中，div 可能会起作用，但我无法更改此 html 结构并且必须实现只有两个 div。第一个 div 是一个动态容器，其中将显示不同的 html。第二个 div 是静态的。

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div class="center">
  I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>

Answer 1

将 width 和 margin: auto 0 添加到 css 类并将其应用于 div 元素。

像这样:

.center {
  margin: 0 auto;
    width: 200px;
}


<div class="center">
  I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>