垂直高度的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/