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/

display：flex 将布局设置为flexbox布局

justify-content：center 将文字设置为水平中心

align-items：center 将文字设置为垂直中心

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用display:table-cell

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将line-height设置为与height值（65vh）相同：

https://jsfiddle.net/bq7kLf99/

垂直高度的CSS文本

3 个答案: