动态高度div

Question

我想垂直对齐div中的文本，例如动态高度，例如10％的页面，但不使用众所周知的＆＃34;表格方法＆＃34;。这可以通过纯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%;
}

在这种特殊情况下，目标是垂直对齐＆＃34; post-details-h＆＃34;格。

Answer 1

使用display: flex + align-items: center

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

查看此fiddle。我知道怎么做的方式确实涉及两个类，比如你是怎么做的。

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

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