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