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

display: flex设置布局为flexbox布局

justify-content: center 设置文本水平居中

align-items: center设置文本垂直居中

.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>