Vertikal zwei Zeilen Text in einem div

Question

Vor diesem Beitrag lese ich einige Artikel zu dem Thema, und ich bin mir bereits bewusst, einige der verwendeten Tricks für vertikale Ausrichtung - die Zeilenhöhe für einzelne Zeile des Textes, die Anzeige: Tabelle für einige Divs und Flexbox in CSS3. Aber ich brauche noch Hilfe zwei Linien innerhalb eines div auszurichten:

.keys { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    min-height: 70vh; 
 
} 
 

 
.key { 
 
    border: 0.1rem solid white; 
 
    margin: 1rem; 
 
    width: 5rem; 
 
    height: 5rem; 
 
    padding: 0.5rem 0; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
kbd { 
 
    display: block; 
 
}

<div class="keys"> 
 
    <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div> 
 
</div>

Wie man sehen kann ich schon einen Flexbox Container haben und Display zu verwenden: Tabelle wird eine zusätzliche div benötigen. Vielleicht wäre es die Antwort, mit der Polsterung oder einer relativen Positionierung zu spielen. Was ist der beste Weg, um diesen Textinhalt vertikal zu zentrieren?

Answer 1

Veränderte Antwort nach Kommentar:

dies auch zu .key hinzufügen, um es einen flexiblen Behälter zu machen, die übereinander seinen Inhalt Zentren (die bereits bestehenden text-align: center hat die horizontale Text-Zentrierung):

display: flex; 
flex-direction: column; 
justify-content: center; 

(Hinweis: Da alles weiß ist und daher unsichtbar bleibt, habe ich einen schwarzen Hintergrund zu den .key Elemente)

.keys { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    min-height: 70vh; 
 
} 
 

 
.key { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    border: 0.1rem solid white; 
 
    margin: 1rem; 
 
    width: 5rem; 
 
    height: 5rem; 
 
    padding: 0.5rem 0; 
 
    text-align: center; 
 
    color: white; 
 
    background: black; 
 
} 
 

 
kbd { 
 
}

<div class="keys"> 
 
    <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div> 
 
    <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div> 
 
</div>