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：hidden包围了整个页面。它可能不会影响任何事情，只是指出它。

这是小提琴：http://jsfiddle.net/dodr6e18/

Answer 1

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

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

更好的方法是使用display：table表示容器，使用table-cell表示子表。检查这个小提琴：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`

无论如何，部分都不会成为100％的浏览器高度

2 个答案: