html - hero div中的居中定位文本

Question

在这段代码中，文本没有垂直居中放置在 div 上。 我不明白，因为我给了职位 50%。 对于图像，我不能给出我想要的自定义高度吗？

在我的照片上，顶部的蓝线是导航栏，不要介意。

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>


/*************************** Hero css ****************************/
.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('../images/assets/teszt-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

Answer 1

你需要给 position:relative 到 bgimage-fooldal 类，这样它就会根据你的 div 高度垂直居中

.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  position:relative;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>