使用CSS在容器内垂直对齐文本

Question

我是CSS的新手，我想垂直对齐：在div中插入一些文本。 之前已经有人问过这个问题，但是我找不到任何适合我的解决方案，因此我肯定会缺少一些明显的东西。

我试过了：

在<p>标记和CSS中添加文本，然后添加vertical-align: middle; 到<p>标记。

在<p>标记和CSS中添加文本，然后添加vertical-align: middle; 到父级

将文本放在<div class="flex-container">和CSS添加中

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}

如这里： https : //jsfiddle.net/dt3kvmdm/

父div没有以px为单位的固定高度。 相反，它是一个百分比。 一个类似问题的解决方案表明这可能是一个问题，但我不清楚。 能够将其保持为百分比会对我有所帮助。

我很高兴听到任何建议！

非常感谢！

缺口。

Answer 1

您需要在父元素上使用display: flex或在子元素上设置height: 100% Fiddle

 .ProjectTitle { background-color: green; position: absolute; width: 100%; height: 20%; bottom: 0; display: flex; justify-content: center; align-items: center; } .flex-container { font-family: "Taviraj", serif; color: #000; letter-spacing: 0.11em; } 

 <div class="ProjectTitle"> <div class="flex-container"> Project Title </div> </div> 

Answer 2

我不确定我是否完全了解您的需求，但是请问这是否有帮助：

HTML：

<div class="ProjectTitle">
    <div class="flex-container">
        <p>Project Title</p>
    </div>
</div>

CSS：

.ProjectTitle {
    background-color: green;
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: 0;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Taviraj", serif;
    color: #000;
    letter-spacing: 0.11em;
    line-height: 20%;
    height: 100%;
}

.flex-container p {
    color: #ffffff;
    vertical-align: middle;
}

小提琴： https : //jsfiddle.net/dt3kvmdm/1/