无论如何，section 不会变成 100% 浏览器高度

Question

我只是想将一些标题文本直接放在占浏览器高度 100% 的 div 的中心。代码如下：

HTML:

<section id="landing-page">
   <div id="logo">
      <h5>Jason Theodore Bain</h5>
      <h4>graphic designer . marketer</h4>
   </div>
</section>

CSS:

html, body { height: 100%;}

#landing-page {
     margin: 0;
     top: 0;
     left: 0;
     display: block;
     height: 100%;
     min-height: 100%;
     background: #fff;
 }

 #logo {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

所以这是非常简单的事情。只需要一些输入来说明为什么我的#landing-page 部分不是视口高度的 100%。

注意在这种情况下，另一个混淆变量可能是我有一个 <div id="wrap"> 及其 overflow-x: 隐藏包围整个页面的事实。可能不影响什么，只是指出来而已。

这是 fiddle：http://jsfiddle.net/dodr6e18/

Answer 1

尝试将 position:absolute 添加到 #logo:

 #logo {
   position:absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

更好的方法是对容器使用 display:table，对 child 使用 table-cell。检查此 fiddle：http://jsfiddle.net/d7onc0jq/

Answer 2

根据评论中的讨论，将 section 移动到包装器 div 上方，并且：

(a) 使 #logo 绝对定位，用 left: 20%

或更好，因为它不涉及反复试验：

(b) 使 #landing-page:

display: table;
width: 100%;

和#logo:

display: table-cell;
vertical-align: middle`

无论如何，section 不会变成 100% 浏览器高度

No matter what, section won't become 100% browser height

html

css

viewport

responsive-design