Question

嘿伙计们，我想将.mission-banner移动到.mission div的垂直中心。但margin: auto 0;不会工作，也不是flex-box。我在这里看不到什么？

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 1200px;
  height: 700px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tea Cozy | Home</title>
    <link rel="stylesheet" href="./resources/css/style.css">
  </head>
  <body>
    <header>
      <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
      <nav>
        <a href="#"><span>Mission</span></a>
        <a href="#"><span>Featured Tea</span></a>
        <a href="#"><span>Locations</span></a>
      </nav>
        </header>
  <!-- main-content -->
        <div class="mission">
          <div class="mission-banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>

  </body>
</html>

这就像它看起来像：

Answer 1

问题是你有任务和相对定位的固定高度/宽度。您还需要为任务横幅设置固定高度，以将其定位在页面中心。

对于所有这些可能有更多的技术解释，但快速玩弄我能够实现我相信你用以下css寻找的东西。您可能需要稍微调整一下以获得您需要的内容，特别是当您添加更多内容时任务横幅的高度：

    .mission {
       background-image: url(../images/img-mission-background.jpg);
       position: absolute;
       top: 70px;
       width: 100%;
       height: 100%;
    }
    .mission-banner {
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      height: 200px;
      background-color: black;
    }

Answer 2

margin:auto会将div水平居中，使用弹性框

.mission{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

flex-direction可让您决定是将内容与column垂直对齐还是与row水平对齐

https://www.w3schools.com/css/css3_flexbox.asp

我添加background:red所以更清楚的是div（任务标题）垂直居中

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
  height: 180px;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

.mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 0 auto;
  top: 70px;
  width: 100%;
  height: 400px;
  display: flex;
  background: red;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

   <header>
      <img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
      <nav>
        <a href="#"><span>Mission</span></a>
        <a href="#"><span>Featured Tea</span></a>
        <a href="#"><span>Locations</span></a>
      </nav>
        </header>
  <!-- main-content -->
        <div class="mission">
          <div class="mission-banner">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>

div垂直位置？

2 个答案: