如何在横幅图片中垂直居中页面标题文本（否 flexbox/grid）？

Question

我正在进行 CSS 仅 psd 转换，我需要将横幅文本垂直居中放置在横幅图像的中间。关于如何在不使用 flexbox 和网格的情况下完成的任何建议？

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, 0, 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>

Answer 1

如果您希望 banner-content 垂直居中，您可以尝试添加以下样式：

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

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

Answer 2

正如我所提到的，这只是将它垂直居中，所以为了固定水平位置，我做了以下操作：

header {
    position: relative;
}

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

如何在横幅图片中垂直居中页面标题文本（否 flexbox/grid）？

How to vertically center page title text within banner image (no flexbox/grid)?

html

css

layout

css-selectors

responsive-design