div 内的居中对齐文本 - div 的高度以百分比表示

Question

我正在尝试将引用中的文本垂直对齐在 .blackdiv 内。我看过其他问题，这些问题说给出与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

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

Answer 2

试试

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