你能用CSS把一个元素垂直居中到另外两个元素之间吗?

Question

我目前正在尝试实现我们UX团队的一个设计，我遇到了麻烦。从本质上讲，我们有一个固定高度的标题，一个占据屏幕其余部分的主体区域，一个位于该主体区域死心的内容，以及一个应该位于标题和内容顶部之间的标题。我制作了一个代码来演示这个想法:

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

我使用display: table[|-row|-cell]做一些事情很成功，比如填充页面上剩余的垂直空间，所以我的演示使用了它。我并不认同这个想法，但它对我们大多数的用户体验设计都很有效。这里的一切都很好，除了让标题位于内容和标题之间。我已经创建了一个解决方案，使用JavaScript找到内容块的顶部并绝对定位标题，但它不像纯CSS解决方案那样干净。无论如何，用纯CSS来做这个?我只支持IE9+和其他浏览器的最新3个版本，所以我可以使用大多数"现代"技术。

Answer 1

如果您试图将center-above定位在页眉和页面中间的框之间，请将.center-above类更改为:

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

Answer 2

这是怎么回事?http://codepen.io/anon/pen/rgnsh

我将正文分成3个div，并使用table-row和table-cell垂直居中。

.main-body {  
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
.tablerow{
  display: table-row;
  height: 33%;
}
.tablecell{
  display: table-cell;
  vertical-align: middle;
}

Answer 3

我认为没有一点JS是不行的

看这个代码

HTML

<div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic labore facilis ad harum eos a non autem deserunt dolore. Architecto.
</div>
<div class="middle">
  <div class="container">
    <div class="header-wrap" id="header-wrap">
      <div class="header">
        <div class="header-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste adipisci sequi ullam quasi illo reprehenderit consequuntur nobis omnis sunt minus .
        </div>
      </div>
    </div>
    <div class="content-wrap" id="content-wrap">
      <div class="content" id="content">
        <div class="content-inner" id="content-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.top {
  height: 40px;
  margin-bottom: -40px;
}
.middle {
  padding: 0;
  padding-top: 40px;
  border: none;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  height: 100%;
  position: relative;
}
.header-wrap ,
.content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: table;
}
.header-wrap {
  bottom: auto;
  height: 50%;
}
.header,
.content {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

JS

window.onload = window.onresize = function() {
  document.getElementById('header-wrap').style.height = document.getElementById('content-inner').offsetTop + 'px'
}