Detaillierte Erklärung verschiedener horizontaler und vertikaler Zentrierungsmethoden in HTML (Grundlagen)

Vorwort

Als wir das Pferd geschrieben haben, wusste vermutlich niemand viel über die Methoden der horizontalen und vertikalen Zentrierung. Daher fasse ich für Sie einige häufig verwendete Methoden zur horizontalen und vertikalen Zentrierung zusammen.

Erste Methode

<!--html-Boxcode-->
<!--Horizontal und vertikal zentrieren-->

<div Klasse="Zentriert1">
    <p>dDer erste Typ</p>
</div>

<!-CSS-Stilteil-->
   .Zentriert1{
            Hintergrundfarbe: #800070;
            Breite: 100 %;
            Höhe: 500px;
            Position: relativ;
        }
    .Zentriert1 p{
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: Dunkelrosa;
            Zeilenhöhe: 200px;
            Textausrichtung: zentriert;
            Position: absolut;
            links: 0;
            unten: 0;
            rechts:0;
            oben: 0;
            Rand: automatisch;
        }

Zweite Methode

<!--html-Boxcode-->
<!--Horizontal und vertikal zentrieren-->

<div Klasse="Zentriert2">
    <p>dDer zweite Typ</p>
</div>

<!-CSS-Stilteil-->
/*Die zweite Methode ist die horizontale und vertikale Zentrierung*/
    .Zentriert2{
            Hintergrundfarbe: #ef8518;
            Breite: 100 %;
            Höhe: 500px;
            Position: relativ;
        }
    .Zentriert2 p {
            Position: absolut;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: rot;
            Zeilenhöhe: 200px;
            Textausrichtung: zentriert;
            links: 50%;
            oben: 50 %;
            Rand links: -100px;
            Rand oben: -100px;
        }

Die dritte Methode

<!--html-Boxcode-->
<!--Horizontal und vertikal zentrieren-->

<div Klasse="Zentriert3">
    <p>Der dritte Typ</p>
</div>

<!-CSS-Stilteil-->
/*Die dritte Methode ist die horizontale und vertikale Zentrierung*/
    .Zentriert3{
            Hintergrundfarbe: dunkelgrau;
            Breite: 100 %;
            Höhe: 500px;
            Position: relativ;
        }
    .Zentriert3 p {
            Position: absolut;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: dunkelorange;
            Zeilenhöhe: 200px;
            Textausrichtung: zentriert;
            links: 50%;
            oben: 50 %;
            transformieren: übersetzen(-50 %, -50 %);
        }

Die vierte Methode

<!--html-Boxcode-->
<!--Horizontal und vertikal zentrieren-->

<div Klasse="Zentriert4">
    <p>dDer vierte Typ</p>
</div>

<!-CSS-Stilteil-->
/*Die vierte Methode ist horizontale und vertikale Zentrierung, alte Version des Flex-Layouts*/
    .Zentriert4{
            Hintergrundfarbe: #FF4444;
            Breite: 100 %;
            Höhe: 500px;
            Anzeige: -webkit-box;
            -WebKit-Box-Pack:Mitte;
            -webkit-box-align: zentriert;
        }
    .Zentriert4 p {
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: Kadettenblau;
            Zeilenhöhe: 200px;
            Textausrichtung: zentriert;
        }

Die fünfte Methode

<!--html-Boxcode-->
<!--Horizontal und vertikal zentrieren-->

<div Klasse="Zentriert5">
    <p>d Fünfter Typ</p>
</div>

<!-CSS-Stilteil-->
/*Die fünfte Methode besteht darin, horizontal und vertikal zu zentrieren. Die neue Version von Flex besteht darin, horizontal und vertikal zu zentrieren*/
    .Zentriert5{
            Hintergrundfarbe: Dunkelschieferblau;
            Breite: 100 %;
            Höhe: 500px;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
        }
    .Zentriert5 p {
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: Fuchsia;
            Zeilenhöhe: 200px;
            Textausrichtung: zentriert;
        }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

>>: Erstellen Sie mit Flutter eine verschiebbare Stapel-Widget-Funktion