html - 使用 flex 时需要堆叠元素

Question

我有一个子 div 居中的 vert 和 horiz 在其父内部，内容居中以及使用 flex。但是，content 和 h2 并排居中，我希望它们堆叠。

.jumbotron {
  position: relative;
  min-height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
#s-text {
  text-align: center;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
#s-text h2 {
  color: #fff;
  margin-bottom: 20px;
  padding: 0;
}

<div class="jumbotron" style="...">
  <div id="s-text">
    <h2> the_secondary_title </h2>	
    <p>multiple lines of content ...</p>
  </div>
</div>

Answer 1

使用flex-direction: column;

.jumbotron { 
  position: relative;
  min-height: 400px; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; padding: 0;
}

#s-text { 
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}

#s-text h2 {
  color: #000;
  margin-bottom: 20px; padding: 0;
}

<div class="jumbotron" style="...">
    <div id="s-text">
        <h2> Heading </h2>              
        <p>multiple lines of content ...</p>    
    </div>
</div>