如何在横幅图像没有flexbox / grid中垂直居中放置页面标题文本？

问题描述

我正在研究仅CSS的psd转换，我需要将横幅文本垂直居中放置在横幅图像的中间。有没有在不使用flexbox和grid的情况下如何完成建议？

header {
    background-image: url(../assets/main-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* viewport (screen height),the el is now taking 90% of the browser height */
    /* We are doing this since the <header> doesn't have a ton
  of content and we want to be able to see the background image. */
    height: 90vh;
    padding-top: 30px;

}

h1 {
  font-family: 'Iceberg',cursive;
  font-size: 8rem;
  text-align: center;;
  line-height: 80px;
  text-transform: uppercase;
}

header h2 {
  font-family: 'Montserrat',sans-serif;
  font-size: 3.5rem;
  text-align: center;
  text-transform: none;
  background-color: rgb(146,255);

}

<header class="clearfix">
  <div class="wrapper">
  <!-- Navigation STARTS-->
    <nav class="main-menu">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
    <!-- Navigation ENDS-->
    <div class="banner-content">
      <h1>Thunder<br>Force<br> Stadium</h1>
      <h2>presented by hot cops</h2>
    </div>
  </div>
</header>

解决方法

正如我提到的那样，它仅在垂直方向上居中，因此为了固定水平位置，我做了以下操作：

header {
    position: relative;
}

.banner-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

,

如果您想使横幅内容垂直居中，可以尝试添加以下样式：

header {
    ... // your other syling
    position: relative;
}

.banner-content {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}