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; }