在動態高度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;
}