需要物品堆疊，同時使用柔性

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>