Question

我目前正试图从我们的UX团队实施一个我遇到问题的设计。基本上，我们有一个固定的高度标题，一个占据屏幕其余部分的主体区域，一个位于该主体区域死点的内容，以及一个应该在标题和标题之间居中的标题最重要的内容。我已经制作了一个代码来展示这个想法：

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

我使用display: table[|-row|-cell]做了很多成功，比如填充页面上剩余的垂直空间，所以我的演示使用了它。我并不依赖于这个想法，但它适用于我们的大多数UX设计。这里的一切都很有效，除了实际上让标题位于内容和标题之间。我已经创建了一个解决方案，它使用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

看看这个codepen

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'
}

你可以用CSS在一个元素之间垂直居中吗？

3 个答案:

HTML

CSS

JS