垂直居中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/