居中对齐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

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

Answer 2

试

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