Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS

<div Klasse="Haupt">
   <div Klasse="Mitte"></div>
  </div>

 .hauptsächlich{
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: rot;
    Position: relativ;
   }
   .Center{
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: himmelblau;
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: 0;
    unten: 0;
    Rand: automatisch;
   }

 .hauptsächlich{
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: rot;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
   }
   .Center{
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: grüngelb;
   } 

 .hauptsächlich{
     Breite: 300px;
     Höhe: 300px;
     Hintergrundfarbe: rot;
     Position: relativ;
    }
    .Center{
     Breite: 100px;
     Höhe: 100px;
     Hintergrundfarbe: rosa;
     Position: absolut;
     links: 50%;
     oben: 50 %;
     transformieren: versetzeX(-50%) versetzeY(-50%);
    }

 .hauptsächlich{
     Breite: 300px;
     Höhe: 300px;
     Hintergrundfarbe: rot;
     Position: relativ;
    }
    .Center{
     Breite: 100px;
     Höhe: 100px;
     Hintergrundfarbe: rosa;
     Position: absolut;
     links: 50%;
     oben: 50 %;
     Rand links: -50px;
     Rand oben: -50px;
    } 

.hauptsächlich{
     Breite: 300px;
     Höhe: 300px;
     Hintergrundfarbe: rot;
     Anzeige: Tabellenzelle;
     vertikale Ausrichtung: Mitte;
    }
    .Center{
     Breite: 100px;
     Höhe: 100px;
     Hintergrundfarbe: #000;
     Rand: automatisch;
    }