div 内的居中对齐文本 - div 具有百分比高度

Question

我试图在 .black div 中垂直对齐我的引述中的文本。我看过其他问题，这些问题说要给出与 div 的高度相同的行高。我认为它不起作用，因为 div 的高度是百分比，但不知道如何解决它。

.black {
background-color:#333333;
margin: 0px;
height: 20%;
line-height: 20%;
}

.quote {
font-family:Courier New, monospace;
font-style:italic;
color:white;
text-align:center;
}

非常感谢，我知道代码可能非常难看。

Answer 1

您可以在 .black 上使用 flex class

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

Answer 2

尝试

.black {
       position: absolute;
       top: 0px;
       bottom: 0px;
       margin: 0 auto;
    }

div 内的居中对齐文本 - div 具有百分比高度

Center aligning text inside div - div has height in percentage

css

height