CSS实现div容器内两行文本水平垂直居中的正确方法

你在父容器.yellowbox上设置了和容器高度相等的line-height: 77px，该属性会被内部子元素继承，导致每个子div的行高都为77px，两行文本总高度远超父容器77px的高度限制，因此年份无法正常排布在月份下方。

补充：等于容器高度的行高仅适用于单行文本垂直居中的场景，多行文本使用该写法必然出现布局错乱。

直接替换原有样式即可，使用flex布局实现容器内多行内容的居中对齐，不需要依赖行高做垂直居中：

<style>
    .yellowbox {
        height: 77px;
        width: 65px;
        background-color: #FFC104;
        font-weight: 700;
        color: #fff;
        /* 以下flex属性实现内容水平+垂直居中，兼容多行内容 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    /* 给内部文本设置常规行高，避免默认行高带来的额外间距 */
    .yellowbox div {
        line-height: 1.2;
    }
</style>
    
<div class="yellowbox">
    <div>MAY</div>
    <div>2022</div>
</div>

如果不想使用flex布局，也可以去掉父容器的固定高度和行高设置，给两个子元素分别设置合适的行高，再通过调整父容器内边距实现居中，示例写法：

.yellowbox {
    width:65px;
    background-color: #FFC104;
    text-align: center;
    font-weight: 700;
    color:#fff;
    padding: 16px 0;
}
.yellowbox div {
    line-height: 1.3;
}

两种方案都可以实现“MAY在上、2022在下，整体在黄色方块内居中”的效果，优先推荐flex写法，后续调整文本大小、增减内容时不需要重新计算间距数值。

内容的提问来源于stack exchange，提问作者BGSniper-xll