Code für display:flex-Attribut in CSS zur Implementierung der vertikalen Zentrierung von Elementen

Dieser Artikel stellt Ihnen das display:flex-Attribut in CSS vor, um den Code für die vertikale Zentrierung von Elementen zu implementieren. Ich hoffe, dass es für Sie hilfreich ist.

Vorher habe ich die absolute Positionierung absolut oder die feste Positionierung fixiert verwendet

Wie man Flex verwendet, um Elemente vertikal zu zentrieren, das übergeordnete Element schließt das untergeordnete Element ein

<div  class=&#39;itemBox&#39;>
    <div>boxboxboxboxboxboxboxboxboxboxbox</div>
</div>
 
.itemBox{
display: flex;
justify-content: center;
align-items: center;
background: #588cfe;
width: 100%;
height: 100vh;
}
.itemBox p{
background: #ffffff;
width: 200px;
height: 200px;
word-break: break-all;//英文超出盒子不换行问题
}

Empfohlene verwandte Artikel:

Code für die String-Konvertierung mithilfe des text-transform-Attributs in CSS

Zwei Möglichkeiten, Tabellen in CSS zu verwenden (Beispiele)

Das obige ist der detaillierte Inhalt vonCode für display:flex-Attribut in CSS zur Implementierung der vertikalen Zentrierung von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!