html - 如何在根据窗口大小改变高度的div中垂直居中div

Question

CodePen

<div class="wrapper">
  <div class="logo"></div>
    <div class="slogan">
        <div class="brand">
          <p>Contact us now!</p>
        </div>
    </div>
</div>

<style>
body {
  background-image:url(http://science-all.com/images/landscape/landscape-05.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%!important;
  padding:0;
  margin:0;
}

.wrapper {
  height:100%;
}

.logo {
  height:250px;
  background-color:aqua;
}

.slogan {
  min-height:200px;
  background-color:transparent;
}

.brand {
  color:aqua;
  font-size:25px;
  text-align:center;
}

</style>

我希望标语 div 能够根据窗口大小调整高度(例如，当页面打开时，让标志和标语 div 适合整个屏幕)。但将 Logo div 保持固定大小。我现在遇到的问题是根据 div 的大小将品牌文本垂直居中。

Answer 1

您可以将您的.slogan div 显示为flexbox。

.slogan {
  display: flex; /* Makes your slogan div flexbox */
  justify-content: center; /* Center the content of that div horizontally */
  align-items: center; /* Center the content of that div vertically */
  min-height:200px;
  background-color:transparent;
}

Updated Codepen .