使用flex时需要堆叠的项目

Question

我有一个子div居中的顶点和horiz在其父级内部，内容也使用flex。但是，内容和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;

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;