CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode

<div Klasse="wrap">
  <div Klasse="Beispiel1">
    <p>CSS</p>
  </div>
</div>

.beispiel1 {
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: orange;
}
.beispiel1 p {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Rand: 0 automatisch;
  Zeilenhöhe: 100px;
  Textausrichtung: zentriert;
}

.wrap { Position: relativ; Hintergrundfarbe: orange; Breite: 300px; Höhe: 300px; } .example2 { Hintergrundfarbe: rot; Breite: 100px; Höhe: 100px; Position: absolut; links: 50 %; oben: 50 %; Rand: -50px 0 0 -50px; }

.warp {
  Hintergrundfarbe: #FF8C00;
  Breite: 200px;
  Höhe: 200px;
  Anzeige: Flex;
  justify-content: center; /*Unterelement horizontal zentrieren*/
  align-items: center; /*Unterelemente vertikal ausrichten*/
}
.beispiel3 {
  Hintergrundfarbe: #F00;
  Breite: 100px;
  Höhe: 100px;
} 

<div Klasse="Warp">
  <div Klasse="Beispiel3">
    Zentralanzeige</div>
</div>

.warp {
  Position: relativ;
  Hintergrundfarbe: orange;
  Breite: 200px;
  Höhe: 200px;
}
.beispiel3 {
  Position: absolut;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Hintergrundfarbe: rot;
  Breite: 100px;
  Höhe: 100px;
  Rand: automatisch;
}

.warp {
  Position: relativ;
  Hintergrundfarbe: orange;
  Breite: 200px;
  Höhe: 200px;
}
.beispiel3 {
  Position: relativ;
  oben: 50 %;
  transformieren: übersetzenY(-50%);
  Hintergrundfarbe: rot;
  Breite: 100px;
  Höhe: 100px;
  Rand: 0 automatisch;
}

.warp {
    Textausrichtung: zentriert;
    Überlauf: automatisch;
    Breite: 200px;
    Höhe: 200px;
    Hintergrundfarbe: orange;
}
.beispiel3 {
    Anzeige: Inline-Block;
    Hintergrundfarbe: rot;
    vertikale Ausrichtung: Mitte;
    Breite: 100px;
    Höhe: 100px;
}

.warp:nach {
    Inhalt: '';
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
    Höhe: 100%;
    Rand links: -0,25em;
    /* Zum Versetzen des Abstands. Kann je nach Schriftart variieren */
}

.warp {
  Anzeige: -webkit-flex;
  Anzeige: -moz-box;
  Anzeige: -ms-flexbox;
  Anzeige: -webkit-box;
  Anzeige: Flex;
  -webkit-box-align: zentriert;
  -moz-box-align: zentriert;
  -ms-flex-align: zentriert;
  -webkit-align-items: zentrieren;
  Elemente ausrichten: zentrieren;
  -WebKit-Box-Pack: Mitte;
  -moz-box-pack: Mitte;
  -ms-flex-pack: Mitte;
  -webkit-justify-content: zentrieren;
  Inhalt ausrichten: zentriert;
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: orange;
}
 
.beispiel3 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
}

<div Klasse="Warp">
  <div Klasse="Beispiel3">
    <img src="xxxx" alt="">
  </div>
</div>
.warp {
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: orange;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}
.beispiel3 img {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: blau;
}