In CSS müssen Sie sich beschweren, indem Sie margin: 0 auto; verwenden, um eine horizontale Zentrierung zu erreichen, aber margin: auto 0 kann keine vertikale Zentrierung erreichen.
Der Hauptgrund dafür ist, dass das übergeordnete Steuerelement, also das Steuerelement selbst, nicht richtig positioniert ist. Wenn Sie sich den Code direkt ansehen, müssen Sie zunächst das relative Layout für das übergeordnete Steuerelement und dann das absolute Layout für das untergeordnete Steuerelement verwenden und die oberen und unteren Attribute in Kombination mit margin: auto 0; verwenden, um Folgendes zu erreichen: Wirkung.
.container-vertikal { Position: relative; Höhe: 200 Pixel; ausrichten: Mitte; Hintergrund: gelb; oben: 0; unten: automatisch 0;}Vertikal zentriert.png
Horizontal und vertikal zentrierenMit der Erfahrung von 5.2 können wir versuchen, die Eigenschaften links, rechts, oben und unten des untergeordneten Steuerelements auf 0 und margin: auto zu setzen. Dieser Effekt kann erzielt werden. Die zu beachtenden Untersteuerelemente müssen das Attribut display:block;
Schauen Sie sich den Code an
.container-horization-vertikal { position: relative; height: 200 px; 80px; Hintergrund: gelb; Textausrichtung: oben: 0; 0; unten: 0; rechts: 0; Rand: auto;}Zusammenfassung: Diese Lösung eignet sich immer noch sehr gut für die Lösung einiger nicht so komplexer Seitenlayouts und kann an jede Benutzeroberfläche und fast alle Browser angepasst werden. Für sehr komplexe Seiten sind jedoch möglicherweise andere Lösungen erforderlich, aber Sie können sich auch von dieser Idee inspirieren lassen.
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.