在另一个 div 的中间垂直居中 div答案

【问题标题】：center div in the vertically in middle of another div在另一个 div 的中间垂直居中 div
【发布时间】：2016-07-17 15:38:43
【问题描述】：

我想将 header-headline div 垂直居中在 header div 的中间，但无论我尝试什么，我都无法让它坐在中间。谁能给点建议？

HTML

<div class="main-wrapper-onepage">
<!-- header -->
<div class="header">
<div class="header-headline">Dan Morris</div>
</div>
<!-- header-end -->
</div>

CSS

.header {
    width:100%;
    height:667px;
    background-image:url(../images/header_background.jpg);
    background-size:cover;
    text-align:center;
}

.header-headline {
    width:100%;
    text-align:center;
    font-size:70px;
    color:#FFF;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    display:inline-block;
    vertical-align:top;

}

这里是 JSfiddle：https://jsfiddle.net/w77pdnxh/

【问题讨论】：

Horizontally center a div in a div的可能重复
居中是指水平居中还是垂直居中？当我运行你的 jfiddle 时，它对我来说是水平居中的。
您需要支持哪些浏览器版本？ HTML5 是一种选择吗？如果是这样，弹性盒有一个很好的解决方案。否则，您将需要使用 inline-block 做一些诡计。
也可能与Vertically centering a div inside another div有关
所以基本上，这是一个非常普遍的问题，已经被问了一百万次了。阅读之前提出的问题，您会找到答案。

标签： javascript jquery html css

【解决方案1】：

您可以使用flexbox's align-items: center 将标题垂直居中。代码如下：

.header {
  ...
  display: flex;
  align-items: center;
}

JSFiddle Here

【讨论】：

【解决方案2】：

将header-header 的位置设置为相对，然后设置top:50%，如下面的jsfiddle 所示。 header-header 将是 relative 到外部 div 并放置在顶部和底部之间的中间点。

https://jsfiddle.net/w77pdnxh/2/

【讨论】：

将 margin-top: -50%; 添加到 .header-headline 以说明 div 的大小，这样您就可以完美居中了。
@MikeC 昨晚我下班开车回家时突然想到我忘了考虑 div 的大小。太好了:)