使用Flex

Question

堆疊的div我有以下的代碼，垂直居中我的內容

HTML

<div class="titleHide flex"> 
    <h4>...</h4> 
    <h1>...</h1> 
</div> 

CSS

.titleHide { 
    position: absolute; 
    top: 0; left: 0; 
    height: 100%; width: 100%; 
    background-color: rgba(209,30,93,0.8); 
} 

.flex { 
display: flex; 
flex: 1; 
align-items: center; 
} 

.flex被其他的div我的網站上。然而，在這種情況下，它將h1和h4標題放在一起，我希望它們在彼此之上。

Answer 1

你可以考慮寫一個單獨的CSS類是，說：

.flex-stack { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    align-items: center; 
} 

.flex, 
 
.flex-stack { 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
} 
 

 
.flex-stack { 
 
    flex-direction: column; 
 
} 
 

 
.module-1, 
 
.module-2 { 
 
    margin: 1em; 
 
}

<h3>Flex Inline</h3> 
 

 
<div class="flex"> 
 
    <div class="module-1"> 
 
    Module #1 
 
    </div> 
 
    <div class="module-2"> 
 
    Module #2 
 
    </div> 
 
</div> 
 

 
<h3>Flex Stacked</h3> 
 

 
<div class="flex-stack"> 
 
    <div class="module-1"> 
 
    Module #1 
 
    </div> 
 
    <div class="module-2"> 
 
    Module #2 
 
    </div> 
 
</div>

希望它是有益的。乾杯!