Heim  >  Artikel  >  Web-Frontend  >  Code für display:flex-Attribut in CSS zur Implementierung der vertikalen Zentrierung von Elementen

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

不言
不言Original
2018-08-06 17:00:562950Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn