为何设置vertical-align:middle后文本仍无法垂直居中？

问题核心原因 #

1. vertical-align属性的生效范围有限：该属性仅对行内元素、行内块元素、表格单元格元素生效。你的.error-message是块级元素，且设置了position:absolute（脱离文档流），vertical-align在这里完全不起作用。
2. 盒模型与默认样式冲突：你给.error-message设置了height:30px和padding:40px，根据标准盒模型，元素实际高度是30px + 40px*2 = 110px；同时内部的<p>标签带有浏览器默认的上下margin，进一步导致文本位置偏移。

解决方案 #

方法1：Flex布局（推荐，适配多行/单行文本）

利用Flex布局快速实现垂直水平居中，同时解决盒模型问题：

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    padding: 40px;
    background: red;
    /* Flex布局核心 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: absolute; 
    left: 0; 
    top: 100px; 
    width: 100%;
    /* 可选：让height包含padding，避免高度超出预期 */
    box-sizing: border-box;
    /* 可根据需求设置height，或去掉让内容撑开 */
    /* height: 30px; */
}

/* 去掉p标签默认margin，消除多余间距 */
.error-message p {
    margin: 0;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

方法2：表格单元格法

将元素设置为表格单元格，让vertical-align生效：

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    padding: 40px;
    background: red;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: absolute; 
    left: 0; 
    top: 100px; 
    width: 100%;
    box-sizing: border-box;
}

.error-message p {
    margin: 0;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

方法3：行高法（仅适合单行文本）

如果文本是单行，设置line-height等于元素的内容高度（需去掉p标签默认margin）：

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    padding: 40px;
    background: red;
    text-align: center;
    position: absolute; 
    left: 0; 
    top: 100px; 
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px; /* 与内容高度一致 */
}

.error-message p {
    margin: 0;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

内容的提问来源于stack exchange，提问作者Pele