5202

ein Blog über technische Fragen zu Blogger

Einen Div Container vertikal und horizontal zentrieren

von
Ein Leser hat mich um Hilfe bei einem Problem gebeten - er möchte einen Div Container innerhalb eines zweiten Div Containers sowohl vertikal als auch horizontal zentrieren. Es soll dabei nicht 'gemogelt' werden - also mit border oder ähnlichen ein Pseudocontainer gebaut werden - sondern es sollen am Ende zwei echte, ineinander verschachtelte Div Container herauskommen.


Das Problem ist so interessant, das ich die Lösung hier poste. Mit zwei Container habe ich es allerdings nicht geschafft, sondern ich brauchte noch einen dritten. Vielleicht ist das nicht die einfachste Lösung, aber ich habe keine bessere gefunden.

Der ummantelnde Container #grid wird mit display:table zur Tabelle gemacht - der zweite, innenliegende [gelbe] Container wird mit display:table-cell zur Tabellenzellen und der Inhalt [=orange Container] vertikal zentriert; dieser orange Container wird abschließend mit display:inline-block und text-align:center horizontal zentriert.

That's all. So simple so far.

HTML
<div id="grid">
  <div>
    <div></div>
  </div>
</div>
CSS
#grid {
 display: table;
 margin: 0 auto;
 text-align: center;
}
#grid > div {
 display: table-cell;
 background: yellow;
 height: 200px;
 width: 200px;
 vertical-align: middle;
}
#grid > div > div {
 display: inline-block;
 height: 100px;
 width: 100px;
 background: orange;
}