为什么文本不水平居中？

Question

我尝试创建简单的消息
这是有效的。
但即使我设置了vertical-align: middle;，文本也没有垂直居中
能解释一下为什么吗？

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

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

<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
    
<div class="error-message">
  <p>Some message text</p>
</div> 

Answer 1

不要使用内边距/边距/高度等的组合。用于定位元素的内容。使用 Flexbox 居中是微不足道的。例如：

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    background: red;
    position: absolute;
    left:0px;
    top:100px;
    width:100%;
    height:110px;             /* add height to account for your previous padding */
    display: flex;            /* use CSS flex */
    justify-content: center;  /* horizontally center contents */
    align-items: center;      /* vertically center contents */
}

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

<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
    
<div class="error-message">
  <p>Some message text</p>
</div> 

Answer 2

“vertical-align”属性主要用于对齐内联和内联块元素相对于其 parnet div 或元素。

请参阅此文档了解verticle-align

我们可以使用 Flexbox 在块级元素中垂直居中。

您只需在

.error-message

类中添加以下 css 属性：

display: flex;
align-items: center;
justify-content: center;