Bir diğer div ortasında dikey olarak merkez div

Question

Ben başlık div ortasında dikey olarak baş-üstbilgi div ortalamak istiyorum ama ne olursa olsun ortada oturup alamıyorum. Birisi tavsiye edebilir mi?

HTML

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

CSS burada

.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

dikey olarak flexbox's align-items: center kullanarak başlığını ortalamak olabilir. Kod aşağıdaki gibi: Aşağıdaki jsfiddle gösterildiği gibi

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

JSFiddle Here

Answer 2

sonra top:50% göreli için header-header pozisyonunu ayarlayın ve. header-header, dış bölüme relative olacaktır ve üst ve alt arasında bir noktada yerleştirilecektir.

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