Was sind die horizontalen und vertikalen Zentrierungsmethoden in CSS? (Codebeispiel)

In diesem Artikel erfahren Sie, welche Methoden zur horizontalen und vertikalen Zentrierung in CSS gelten. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Reine CSS-Methode der vertikalen Zentrierung

1. Basierend auf der Position: absolut (aber die absolute Positionierung löst sich vom Dokumentfluss und ist nicht freundlich zu Geschwisterelementen)

1. Position: oben: 50%; Rand-links: -50px; absolut; oben: 0;rechts:0;unten: 0;links: 0;

Die beiden oben genannten Div-Größen sind klar

3. Position: absolut; oben: 50 %; links: 50 %;

Die Größe ist unklar

4.

5. display: table, (wird das Gesamtlayout der Seite zerstören)

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

rrree

Wie kann ich CSS horizontal und vertikal zentrieren? (Codebeispiele) Vollständige Einführung. Wenn Sie mehr über

CSS-Video-Tutorials erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWas sind die horizontalen und vertikalen Zentrierungsmethoden in CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!