在动态高度div中垂直对齐文本

Question

我想在div内垂直对齐文本，该div是动态高度，例如说占页面的10％，但不使用众所周知的“表格方法”。 可以使用纯CSS来实现吗？

代码段：

HTML：

<div class="post-details-wrapper">
    <div class="post-details-h">
        Post Details
    </div>
</div>

CSS：

post-details-h {
background-color: green;
height:5%;
width:100%;
}

在此特定情况下，目标是垂直对齐“ post-details -h” div的文本。

Answer 1

使用display: flex + align-items: center

 *{ padding: 0; margin: 0; } .post-details-h{ background-color: green; height: 100px; width: 100%; display: flex; align-items: center; } 

 <div class="post-details-wrapper"> <div class="post-details-h"> <span>Post Details</span> </div> </div> 

Answer 2

通常的方法是使用display：table的东西。 但是，如果您不想使用它，可以尝试如下操作：

<div class="post-details-wrapper">
    <div class="post-details-h">
        <span>Post Details</span>
    </div>
</div>

.post-details-wrapper {
    height:350px;
    background:red;
}
.post-details-h {
    background-color: green;
    height:10%;
    width:100%;
}
.post-details-h:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
}
.post-details-h span {
    display: inline-block;
    vertical-align: middle;
}

只需添加跨度，即可将taht元素放在.post-details-h中。

您可以签入JSFiddle

希望这可以帮助。

Answer 3

看看这个小提琴 。 我知道该怎么做的方式确实涉及到两个类，就像您的工作方式一样。

.post-details-h {
    line-height: 200px;
    width:100%;
    vertical-align: center;
}

.post-details-wrapper {
    background-color: red;
    height: 200px;
    position: relative;
}