Als wir das Pferd schrieben, wussten wir wahrscheinlich nicht viel über die Methode der horizontalen und vertikalen Zentrierung. Deshalb gebe ich Ihnen einen Überblick über mehrere häufig verwendete horizontale und vertikale Zentrierungsmethoden.
erste Methode <!--html-Boxcode--><!--horizontal und vertikal zentriert--><div class=Centered1> <p>d erster Typ</p></div><!-css-Stilteil--> .Centered1{ Hintergrundfarbe: #800070; Breite: 100%; Höhe: relativ; .Centered1 p{ Höhe: 200px; Hintergrundfarbe: 200px; Textausrichtung: links: 0; Zweite Methode <!--html-Boxcode--><!--horizontal und vertikal zentriert--><div class=Centered2> <p>dSecond type</p></div><!-css style part--> / *Die zweite Methode ist horizontal und vertikal zentriert*/ .Centered2{ width: 100%; height: relative; 200px; Höhe: 200px; Randhöhe: 50%; Dritte Methode <!--html-Boxcode--><!--horizontal und vertikal zentriert--><div class=Centered3> <p>d dritter Typ</p></div><!-css-Stilteil--> /*Die dritte Methode ist horizontale und vertikale Zentrierung*/ .Centered3{ background-color: dimgrey; height: 500px; 200px; Höhe: dunkelorange; Textausrichtung: links: 50%; vierte Methode <!--html-Boxcode--><!--horizontal und vertikal zentriert--><div class=Centered4> <p>d vierter Typ</p></div><!-css-Stilteil--> /*Die vierte Methode ist horizontale und vertikale Zentrierung, alte Version des Flex-Layouts*/ .Centered4{ width: 100% height: -webkit-box; -webkit-box-pack:center; -webkit-box-align: center; .Centered4 p { height: 200px; text-align: center; Die fünfte Methode <!--html-Boxcode--><!--horizontal und vertikal zentriert--><div class=Centered5> <p>d fünfter Typ</p></div><!-css-Stilteil--> /*Die fünfte Methode ist die horizontale und vertikale Zentrierung.*/ .Centered5{ background-color: darkslateblue; width: 100%; display: flex; ; align-items: center; .Centered5 p { height: 200px;Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.