如何使用vh垂直對齊？

Question

我想垂直對齊在一個使用vh單位中的最小高度的div內的h1。 下面是HTML和CSS的：
HTML

<section class="imgdestaque"> 
    <h1>Abraçar o <span>Ar Puro</span></h1> 
</section> 

CSS

.imgdestaque{ 
width:100%; 
min-height:75vh; 
background: url(../img/destaque2.jpg) no-repeat left bottom fixed; 
background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
margin-top:50px;} 

.imgdestaque h1{ 
color: white; 
font-family: 'museosans900'; 
font-size:5em; 
padding-top:15%; 
text-align: center; 
text-transform: uppercase;} 

它看起來真的關閉，當你看到它在移動或降低瀏覽器的高度。任何解決方案謝謝

Answer 1

你有幾個選擇這個，一個是下面的例子。

.imgdestaque { 
 
    width: 100%; 
 
    min-height: 75vh; 
 
    background: url(../img/destaque2.jpg) no-repeat left bottom fixed; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin-top: 50px; 
 
} 
 
.imgdestaque h1 { 
 
    color: red; 
 
    font-family: 'museosans900'; 
 
    font-size: 5em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 
/* This centers your h1 tag vertically */ 
 

 
.imgdestaque { 
 
    position: relative; 
 
} 
 
.imgdestaque h1 { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<section class="imgdestaque"> 
 
    <h1>Abraçar o <span>Ar Puro</span></h1> 
 
</section>