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

<!--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;
        }

<!--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;
        }

<!--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 %);
        }    

<!--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;
        }

<!--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;
        }