垂直对齐div内的文本高度和宽度百分比？

Question

我知道如何在div中垂直对齐文本,但如果div具有百分比高度和宽度,我不确定如何做到这一点.这是我的代码:

    <div id="header">
        <h1>Home</h1>
    </div>

    #header {
        background-color: red;  
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%; 
        height: 15%;
    }

现在在我的网页上,div中的文本已经水平对齐但不是垂直对齐.我该如何解决这个问题？您是否也可以尝试解释您的答案并尽可能简单地保持它们(我还是相对较新的HTML/CSS).谢谢.

Answer 1

您可以使用该flexbox模型轻松地居中.

只需将以下规则添加到容器中:

display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering

小提琴

注意这可能是比你预期的更广泛的解决方案,但什么是真正酷的flexbox是,它在许多不同的情况,包括你的(例如使用h1标签在这里).