Html 具有自动宽度的自动边距

我试着把一个容器放在中间，里面有一排正方形的div。然而，为了让它工作，我把它简化成了一个容器中的一个正方形。它需要自动宽度，但也需要居中。 如何使使用自动宽度的容器div居中？ 只有在“panel”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;
}

HTML文件
CSS文件
.小组{
位置：绝对；/*这似乎是使自动宽度正常工作所必需的*/
利润率：10px自动；
边框样式：实心；
边框颜色：#000000；
}
.项目{
宽度：50px；
高度：50px；
利润率：30像素；
边框样式：实心；
边框颜色：#000000；
}

---

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

我不确定您的问题是什么，但您不需要使用绝对/固定位置或左/右浮动来居中内部div。

---

要使内部div居中，您可以使用

marginleft:50%

减去

margin:30px

，您的内部div将居中

是的，但是一旦我添加了更多的项目，它就不再居中了。我尽可能地避免绝对测量。