центр 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's align-items: center. Код следующим образом:

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

JSFiddle Here

Answer 2

Установите положение header-header, чтобы относительное, а затем top:50%, как показано в приведенной ниже jsfiddle. header-header будет relative на внешний div и помещен в точку на полпути между верхней и нижней частью.

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