垂直高度的CSS文本

Question

text-align: center; 
box-sizing: border-box; 
color: #fff; 
float: left; 
width: 50%; 
height: 65vh; 
padding-top: 14% 

這是我的CSS。我想要的是文字正好在中間，但它不起作用，因爲我的身高取決於屏幕高度。我該如何解決這個問題？

Answer 1

您可以使用Flexbox佈局。

爲Flexbox的

很好的指導：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

顯示：彎曲組佈局了flexbox佈局

證明內容：中心集文字水平中心

對齊項：中心將文字設置爲垂直中心

.container { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 3px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <p class="text">Some Text</p> 
 
</div>

Answer 2

你可以使用display:table-cell

.container { 
 
    width: 150px; 
 
    height: 65vh; 
 
    border: 3px solid black; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="container"> 
 
    <p class="text">Some Text</p> 
 
</div>

Answer 3

設置line-height是一樣的height值（65vh）：

https://jsfiddle.net/bq7kLf99/