html - 具有自动宽度的自动边距

Question

我试图将一个容器居中，其中包含一排方形 div。然而，只是想让它工作，我把它缩小到一个容器内的一个正方形。它需要自动宽度，但也需要居中。如何使使用自动宽度的容器 div 居中？当它的宽度固定时，它似乎只将“面板” div 居中。

HTML FILE  

<div class="panel">
    <div class="item"></div>
</div>

CSS FILE

.panel {
    position:absolute; /*This seems necessary to get the auto width to work.*/
    margin: 10px auto;

    border-style: solid;
    border-color: #000000;
}

.item {
    width: 50px;
    height: 50px;
    margin: 30px;

    border-style: solid;
    border-color: #000000;
}

我最终将在面板中添加更多项目。

Answer 1

我不确定你的问题到底是什么，但你不需要使用绝对/固定位置或左/右浮动来使内部 div 居中。要使内部 div 居中，您可以使用margin-left: 50%减号margin: 30px，您的内部 div 将居中。JSFIDDLE