html - 如何使用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>