html - 您可以使用 CSS 将一个元素垂直居中放置在另外两个元素之间吗？

Question

我目前正在尝试实现我们的 UX 团队的设计，但我遇到了麻烦。本质上，我们有一个固定高度的标题，一个占据屏幕其余部分的正文区域，一段位于该正文区域死点的内容，以及一个应该位于标题和内容的顶部。我做了一个 codepen 来演示这个想法:

http://codepen.io/nseegmiller/pen/EmgCI/

我在使用 display: table[|-row|-cell] 来填充页面上剩余的垂直空间等方面取得了很好的成功，因此我的演示使用了它。我不认同这个想法，但它适用于我们的大多数 UX 设计。这里的一切都很好，除了实际上让标题位于内容和标题之间。我已经创建了一个解决方案，它使用 JavaScript 找到内容 block 的顶部并绝对定位标题，但它不像纯 CSS 解决方案那样干净利落。无论如何要用纯 CSS 来做到这一点？我只支持 IE9+ 和其他浏览器的最新 3 个版本，因此我可以使用大多数“现代”技术。

Answer 1

如果您尝试将 center-above 放在页眉和页面中间框之间的中间位置，请将 .center-above 类更改为这个:

.center-above {
    position: absolute;
    top: 30%;
    width: 100%;
    text-align: center;
}