灵活的html模型与对齐

我的结构如下：

<style>
#main{
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
   border: 1px solid red;
}
#container{
    margin-right: -50px;
}
.block{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    margin-right: 30px;
}
</style>
<div id="main">
    <div id="container">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

#主要{
最大宽度：500px；
保证金：0自动；
溢出：隐藏；
边框：1px纯红；
}
#容器{
右边距：-50px；
}
.街区{
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯灰；
右边距：30px；
}

如果我有宽的宽度，它看起来像 没关系

但如果我用窄的，那就糟了 我需要内部的物体像这样对准中心

---

嗨，这里需要的是属性

文本对齐：居中

：

#container{
  margin-right: -50px;
  text-align:center;
}

演示

这个怎么样

如果希望最后一行的块有固定的空间，请删除块的边距、用户文本对齐对齐对齐和添加单词间距

#container {
  letter-spacing: 10px; //word-spacing: 10px; //to space blocks on last row
  text-align: justify; //to align everything to the borders on the first lines
  padding: 0px 10px; //to separate the blocks from the borders a little
}

.block {
  margin-right: 0px;
}

当宽度太小，每行只适合一个块时，这看起来是错误的，但可能需要一些媒体查询，使css响应，以修复这种特殊情况

---

编辑：字母间距更适合交叉排字，您可能需要字母间距：30px；因为你的边距是30px，所以我创建了一个提琴：但是我不理解你的问题，当你使用窄宽度的木块时，左边的木条，但是我需要它们像是一样与中心对齐，但是最后一个木块也会在中心。它不是这样的，那么您可能需要一些Jquery或JsPoor；第二行的All.block元素显示错误。如果您将单词间距设置为10px，它们看起来是正确的，这就是我在css行上的注释