如何使这个 DIV 居中（CSS/HTML）答案

【问题标题】：How can I center this DIV (CSS/HTML)如何使这个 DIV 居中（CSS/HTML）
【发布时间】：2013-03-25 05:19:38
【问题描述】：

我有一个想要居中的 DIV。没有定义宽度或长度，因为该页面被假定为适用于所有窗口大小（当您重新调整窗口大小时，页面会调整）。我需要保留这个，同时将 DIV 居中。

这里是我所说的视觉辅助的照片。

包含所有这些图像的 DIV“容器”需要居中。在图片中，它与右侧的间隙左对齐。

为了方便查看，这里是jsfiddle中的代码。

#container{
    display:box;
    float:left;
    margin-top:40px;
    left:50%;
}
#thumb{
    display:box;
    float:left;
    top:0;
    left:0;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}


<body>
<img src='background/001.JPG' class='background'/>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
</div>

</body>

【问题讨论】：

标签： css html image center-align

【解决方案1】：

首先，您不能有多个具有相同 ID 的元素。您有多个 ID 为 thumb 的元素。你不能那样做。改用类。

然后将缩略图的display设置为inline-block，将容器的text-align设置为center：

#container {
    text-align: center;
}
.thumb {
    display: inline-block;
}

您的代码中还有其他一些错误：

display: box 不太可能是您想要的。你可能想要block。
left 和 top 没有任何作用，除非设置了 position。
你似乎对float: left 有一种奇怪的吸引力，这是不必要的。
我需要将 margin 更改为 padding 以保持相同的间距。

Look at the result.

【讨论】：

嘿，icktoofay，谢谢你的提示。我已经有一段时间没有弄乱东西了。您的解决方案完美地解决了拇指居中的小问题。有什么解决办法吗？我仍然希望拇指从左到右而不是居中。
@JohnDoe：哦，我以为这就是你想要的效果。如果我现在对您的理解正确，您希望它当前调整大小，除非缩略图无法填充的任何额外空间将分布在容器的左侧和右侧？不幸的是，我不知道该怎么做。对不起。
没关系。我可以这样处理它，更主要的问题得到了解决！再次感谢:)

【解决方案2】：

边距：0 自动；在#container 中，在margin-top 之前：

还有，为什么要使用 float: left in the container？

【讨论】：

【解决方案3】：

这应该可以解决问题。

#container {
   margin-left: auto;
   margin-right: auto;
}

【讨论】：

【解决方案4】：

除非你给它一个定义的宽度，否则你不能居中一个块元素。否则，浏览器会为该元素提供尽可能多的宽度，这意味着它已经居中（左边零空间，右边零空间）。

使用min-width 和/或max-width 给元素一个定义的宽度，它比单个width 值更灵活，然后给元素一个margin: 1em auto 样式以使其在未使用的宽度内水平居中在其父元素中可用。

【讨论】：