需要物品堆叠，同时使用柔性

Question

我有一个孩子的div居中垂直和水平在其父母的内部中心以及使用柔性。但是，内容和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> \t 
 
    <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>