html - 居中的 div 偏离中心？

Question

我有一个 150px div 的 6x4 数组，每个 5px 边距（想象 Metro UI）。我还有一个模态 div。方形 div 都是display: inline-block，以text-align父 div 为中心，每 6 个后有一个换行符（以制作 6x4 网格）。当我的模态（也居中，带有margin）弹出时，它与同样居中的图块稍微不对齐。为什么会这样？这没什么大不了的，但它与它下面的方形图块对齐，并且所有 1-2 像素都关闭看起来很可怕。可能有区别text-align: center并margin: auto导致这种情况吗？

从 HTML：

<div id="container">
<br />
<div id="tile11">

</div>
<div id="tile12">

</div>
<div id="tile13">

</div>
<div id="tile14">

</div>
<div id="tile15">

</div>
<div id="tile16">

</div>
<br />
<div id="tile21">

</div>
<div id="tile22">

</div>
...........
<div id="tile46">

</div>
</div>

来自 CSS：

#container {
background: #000000;
width: 1000px;
height: 680px;
z-index: 1;
text-align: center;
margin: 10px auto 0px auto;
}

#tile44 {
background: #333333;
width: 150px;
height: 150px;
margin: 5px;
display: inline-block;
z-index: 1;
}

Answer 1

以此为开端：

http://jsfiddle.net/HdHRe/10/

#container {
   background: #000000;
   width: 960px;
   height: 680px;
   margin: 0 auto;
   padding: 5px;
   overflow: auto;
}

#container div {
   background: #333333;
   width: 150px;
   height: 150px;
   margin: 5px;
   float: left;
}

​</p>

我认为这是创建网格的更好方法。现在我们需要知道你想在哪里显示你的模态窗口。