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

Question

我想将标题-标题div垂直居中放置在标题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/

Answer 1

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

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

JSFiddle在这里

Answer 2

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

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