Centering in the Unknown

Wenn es um das Zentrieren von Elementen im Webdesign geht, gilt: Je mehr Informationen Sie über das zu zentrierende Element und sein Elternelement haben, desto einfacher ist es. Was ist also, wenn Sie nichts wissen? Es ist immer noch irgendwie machbar.

Nicht zu schwer: Bekanntes Kind

Wenn Sie die Höhe und Breite sowohl des zu zentrierenden Elements als auch seines Elternelements kennen (und diese Maße sich nicht ändern, d. h. nicht in einer fließenden Breite), ist eine narrensichere Methode, das Element zu zentrieren, es einfach mit absoluter Positionierung und Pixelwerten zu versehen, damit es perfekt zentriert aussieht.

Nehmen wir an, Sie kennen die genaue Breite und Höhe des zu zentrierenden Elements, aber das Elternelement kann sich in Höhe und Breite ändern.

Sie positionieren das zu zentrierende Element absolut und setzen die Werte für oben und links auf 50 % und die Werte für den oberen und linken Rand auf den negativen Wert der halben Höhe und Breite des Elements. Das war eine Zungenbrecher, also schauen Sie sich das an.

Schwieriger: Unbekanntes Kind

Die Schwierigkeit entsteht, wenn Sie die Abmessungen des zu zentrierenden Elements nicht kennen.

Die grobste Methode, damit umzugehen, sind buchstäblich Tabellen

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

Wenn Sie sich Sorgen um die Semantik davon machen, könnten Sie versuchen, es an Ihren Inhalt anzupassen.

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

Und dasselbe Ergebnis wie bei den Tabellen erzielen, wie

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

CSS-Tabellen sind vielleicht in Ordnung für Sie. Oder vielleicht auch nicht. Tabellen rendern sich etwas anders als ein normaler Block-Element-Div. Zum Beispiel die 100%-Breite. Eine Tabelle dehnt sich nur so weit aus, wie sie für den darin enthaltenen Inhalt benötigt wird, während sich ein Block-Element standardmäßig automatisch auf die Breite seines Elternelements ausdehnt. Auch, Gott helfe Ihnen, wenn Sie andere Inhalte in diesem Div benötigen, die Sie positionieren möchten oder die sich nicht wie eine Tabellenzelle verhalten sollen.

Michał Czernow schrieb mir mit einer alternativen Technik, die äußerst clever ist und dasselbe erreicht. Wenn wir ein „Geister“-Element innerhalb des Elternelements einrichten, das 100 % Höhe hat, dann werten wir sowohl dieses als auch das zu zentrierende Element mit vertical-align: middle aus, und wir erzielen denselben Effekt.

Muss dieses Geisterelement ein unsemantisches Element sein? Nein, es kann ein Pseudoelement sein.

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

View Demo

Ich würde Ihnen gerne sagen, dass die Geisterelement-Technik viel besser ist und die Standard-Zentriertechnik für die Ewigkeit sein sollte. Aber in Wirklichkeit ist sie so gut wie der Tabellen-Trick. Die Browserunterstützung dafür ist im Grunde alles und IE 8+. IE 7 unterstützt keine Pseudoelemente. Aber es unterstützt auch keine CSS-Tabellen, also ist es gleichauf. Wenn IE <= 7-Unterstützung benötigt wird, ist es Zeit für <table> (oder verwenden Sie ein ebenso unsemantisches <span> oder etwas Ähnliches für das Geisterelement).

Diese Dinge sind kein brandneues Terrain. Gary Turner schrieb vor etwa 5 Jahren darüber. Aber ich schreibe Michał zu, dass er es mit einem Pseudoelement gemacht hat und es zur semantischsten Annäherung bisher macht.

Hinweis: Der 0,25em-Ruck nach hinten ist etwas wackelig. Um es perfekt zu machen, könnten Sie font-size: 0; auf dem Elternelement setzen und dann die Schriftgröße innerhalb des Inhaltscontainers wieder hochsetzen.