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;
    }