HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

小提琴

http://jsfiddle.net/8xUTJ/4/

我希望这样做可以使一个黑色的小盒子在一个较大的红色框中垂直和水平地居中.相反,我得到一个黑色的盒子粘在红色框的顶部,红色的框有边缘顶部.

有人可以解释CSS在这里做什么呢？