垂直居中遇到麻烦，将div与文本块对齐

Question

https://jsfiddle.net/n00q5wdn/

请参考小提琴输出加上我正在链接图像，以便更清楚地理解问题。

我只想让'hgroup'垂直居中。

HTML：

<article id="full-height">
    <div class="hgroup">
        <h1>Exotic Designs</h1>
        <h2>Best Quality</h2>
    </div>
</article>

SCSS：

#full-height {
  background-color: red;
  min-height: 600px;
}

.hgroup {
  h1 {
    color: white;
    font-size: 5em;
    font-weight: 800;
    line-height: 0.8em;
    text-shadow: black 0 0 20px;
    text-align: center;
  }
  h2 {
    display: block;
    color: white;
    width: 60%;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid white;
    margin-top: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 1.3em;
  }
}

Answer 1

最适合此类问题的是flexbox，它使用专门针对这些情况创建的Box Alignment规范。

如果将#full-height - 元素设置为显示为弹性行容器，则可以将内容与align-items（垂直）和justify-content（水平）对齐。

#full-height {
  display: flex;
  align-items: center;
  justify-content: center;
}

请参阅forked fiddle here。

这适用于大多数现代浏览器，如果您通过Autoprefixer之类的东西运行它，您也可以在一些稍微旧的浏览器中使用它（IE10，旧的Safari等）。 IE9和其他古老的浏览器不支持flexbox，所以我建议使用具有固定边距的.hgroup元素或只是顶部对齐等后退。如果你可以使用固定的，明确的容器高度，还有另一个更黑客和更复杂的解决方案：

我发现您已使用inline-block和vertical-align来尝试使用middle关键字进行垂直居中。只有在#full-height容器上设置一个明确的高度，并使用“ghost”元素强制行高计算覆盖该框时，这才有效，例如：

#full-height {
  height: 600px;
  text-align: center; /* horizontal centering */
}
/** 
* "ghost element", to force the calculation of the
* middle keyword to equal the vertical middle of
* the box.
*/
#full-height:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  /* offset the whitespace generated by inline-block.
     May vary with font-size. */
  margin: -.25em; 
}

.hgroup {
  display: inline-block;
  vertical-align: middle;
 }

请参阅jsbin example for this solution here。