在 100% 宽度相对定位的 div 内垂直和水平居中 div

Question

有一个 div（实际上是一个标题元素），我现在看到很多网站在容器中完美地居中显示文本内容。所以我正在尝试，但到目前为止，它离 div 的顶部比中心太远。示例在这里：http://jsfiddle.net/nuoxpmrk/

HTML：

<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
  <section class="entry-caption">
    <h1 class="entry-title">Title Goes Here</h1><p class="entry-subtitle">This is a Subtitle</p> <p class="entry-credits">Written by: JS Fiddle</p>
  </section>
</header>

CSS：

.entry-header { position: relative; width: 100%; height: 640px; color: #FFF; }
.entry-caption { margin: 15% auto 0; padding: 32px; text-align: center; width: 100%; }
.entry-caption p.entry-subtitle { font-size: 18px; line-height: 1.25; text-transform: none; }
.entry-caption h1.entry-title { font-size: 38px; line-height: 1.25; }
.entry-caption p.entry-credits { font-size: 14px; line-height: 1; margin-bottom: 1em; text-transform: uppercase; }

Answer 1

您的margin: 15% auto 0; 是让它成为顶级的原因。您需要将所有内容包装在 <div> 中，并为其赋予以下样式：

.entry-header {
  position: relative;
  width: 100%;
  height: 640px;
  color: #FFF;
}
.entry-caption {
  padding: 32px;
  text-align: center;
  width: 100%;
}
.entry-caption p.entry-subtitle {
  font-size: 18px;
  line-height: 1.25;
  text-transform: none;
}
.entry-caption h1.entry-title {
  font-size: 38px;
  line-height: 1.25;
}
.entry-caption p.entry-credits {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 1em;
  text-transform: uppercase;
}
.center {
  width: 100%;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -90px;
  overflow: hidden;
}

<header class="entry-header" style="background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
  <section class="entry-caption">
    <div class="center">
      <h1 class="entry-title">Title Goes Here</h1>
      <p class="entry-subtitle">This is a Subtitle</p>
      <p class="entry-credits">Written by: JS Fiddle</p>
    </div>
  </section>
</header>

Answer 2

您可以使用CSS Flexbox 保持简单。你只需要添加三行代码，你也可以摆脱一堆代码。

无论屏幕垂直或水平调整大小，居中的项目都将保持居中。

HTML（无变化）

CSS

.entry-header { 
    display: flex; /* establish flex container */
    justify-content: center; /* center child element (<section>) horizontally */
    align-items: center; /* center child element (<section>) vertically */

    /* No further changes */

    position: relative;
    width: 100%;
    height: 640px;
    color: #FFF;
}

.entry-caption { 
    /* margin: 15% auto 0; don't need this */
    /* padding: 32px; don't need this */
    text-align: center; 
    /* width: 100%; don't need this */
}

演示：http://jsfiddle.net/nuoxpmrk/2/

请注意，所有主流浏览器都支持 flexbox，except IE < 10。