Schneller CSS-Trick: Wie man ein Objekt genau in der Mitte zentriert

Ich musste kürzlich eine Platzhalterseite für eine Website erstellen. Ich wollte, dass das Logo-Bild genau in der Mitte des Bildschirms zentriert ist, das heißt, sowohl vertikal als auch horizontal zentriert. Schnell dachte ich, ich gebe dem Bildelement einfach eine Klasse namens "centered" und style dann diese Klasse

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

Aber wie Sie sicher denken, funktioniert das nicht ganz. Was das bewirkt, ist, dass die obere linke Ecke des Bildes genau in der Mitte der Seite platziert wird, nicht die *Mitte* des Bildes in der Mitte der Seite.

Um das Bild genau zu zentrieren, ist es eine einfache Sache, einen negativen oberen Rand von der halben Höhe des Bildes und einen negativen linken Rand von der halben Breite des Bildes anzuwenden. Für dieses Beispiel, so

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Das wird den Trick tun

Das funktioniert wunderbar, wenn Sie die Größe des zu zentrierenden Objekts kennen. Wenn Sie sie nicht kennen oder denken, dass sie sich ändern könnte und zukunftssicher sein wollen, versuchen Sie Folgendes

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Der `translate`-Wert für `transform` basiert auf der Größe des Elements, daher wird dies gut zentriert.