使用flex align-items center將div中的文本垂直居中

Question

我無法弄清楚我的CSS有什么問題。 我認為這會將文本垂直居中在這個div中：

 .content-bar { height: 60px; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; } .content-bar-content { display: flex; align-items: center; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

但是，文本排在div的頂部。 我錯過了什么？

請參閱codepen： https ：//codepen.io/anon/pen/xgOwwp

Answer 1

檢查演示，我已交換高度

 .content-bar { background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; } .content-bar-content { display:flex; align-items:center; height: 60px; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

Answer 2

必須在父容器中聲明所有CSS。 這是一個水平和垂直居中的示例：

 .content-bar { height: 80px; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; display:flex; align-items:center; justify-content: center; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

希望這可以幫助！

Answer 3

您可以將content-bar指定為flexbox如下所示：

 .content-bar { height: 60px; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; display: flex; align-items: center; } .content-bar-content {} 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

或者您可以繼承 content-bar height: inherit - 只需添加height: inherit content-bar-content - 請參閱下面的演示：

 .content-bar { height: 60px; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; } .content-bar-content { display: flex; align-items: center; height: inherit; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

Answer 4

為兩個類添加高度，並將addvertical-align：middle添加到內容

 .content-bar { height: 60px; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; height:100% } .content-bar-content { height:100%; display:flex; align-items:center; vertical-align: middle; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123 </div> </div> 

Answer 5

嘗試使用這個簡單的代碼來對齊div中心的文本，刪除固定高度並給出填充

 .content-bar { padding:30px; height:auto; background: #f7f7f7; overflow: hidden; border-bottom: 1px solid #ececec; } .content-bar-content { display:flex; text-align:center; } 

 <div class="content-bar"> <div class="content-bar-content"> Testing 123<br/> Testing 123<br/> Testing 123<br/> Testing 123<br/> </div> </div>