Css 顶部垂直对齐内联块和水平相同的边距

这个CSS代码使两列框排列在一个更大的容器中。基本上这很好，但有一个问题-每行的框都不是水平居中的。左侧框的边距小于右侧框的右边距。我需要让它们一样

    #container {
        width:  20pc;
        height: 40pc;
        border-style: solid;
        border-width: 1px;
    }
    .box {
        border-style: solid;
        border-width: 1px;
        width: 45%;
        display: inline-block;
        vertical-align: top;
    }

html的一部分是

<div id="container">
  <p class="box">Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box</p>
  <p class="box">The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", and "table-row-group" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.</p>
  <p class="box">This may be the best technique overall, simply because the height can vary with the content and browser support is great. The main disadvantage is the extra markup, requiring a total of three elements to get the final one centered.</p>
  <p class="box">Displays an element as an inline-level flex container. New in CSS3</p>
</div>

将元素显示为内联级块容器。该块的内部被格式化为块级别框，元素本身被格式化为内联级别框
IE7及更早版本中不支持值“内联表”、“表”、“表标题”、“表单元格”、“表列”、“表列组”、“表行”和“表行组”。IE8需要一个！DOCTYPE。IE9支持这些值
总体而言，这可能是最好的技术，因为高度可以随内容而变化，而且浏览器支持非常好。主要缺点是额外的标记，需要总共三个元素才能使最后一个元素居中
将元素显示为内联级别的flex容器。CSS3中的新功能

我已经尝试了这些css属性

justify content:space-around；自对准：居中；对齐项目：居中；margin:auto

，但它们都不能解决此问题

。我甚至不能通过分别为左框和右框设置固定的相同左边框和右边框来解决这个问题。盒子的高度是动态的，盒子的数量是奇数或偶数。我的最终目标是让它看起来像一个两列的盒子

---

请给我一个线索

是否尝试添加

文本对齐：居中到您的
#容器
CSS

查看此小提琴：
是的，这部分解决了问题。我忘了提到的一件事是，当容器内的盒子数量为奇数时，由于最后一个盒子与中心对齐，所以看起来不太好。盒子的高度也不尽相同，所以有时候看起来很难看。你能不能再举一个相关的例子？（如果框的数量为奇数，请尝试添加与框具有相同属性的占位符元素，但边框除外。）此小提琴是否就是您想要的？虽然在这种情况下，您并不真正需要左/右类。是的，占位符的想法很聪明。