Css 如何在浏览器屏幕的中心对齐两个非固定宽度的div？

我想在我的屏幕中心对齐两个非固定宽度的div，我想两者都出现在同一水平面上。我想在左div的右边缘和右div的左边缘之间没有边距。所以我把这个加起来

<div id="container">
    <div id="left"><%= render 'form' %></div>
    <div id="right"><%= render 'totals' %></div>
</div>

---

但令人失望的是，左边的div出现在浏览器屏幕的最左边，右边的div出现在浏览器的最右边（使用Chrome在MAC上），并且div之间有很大的空间。如何更正上述内容以消除它们之间的空间？

清除浮点数。然后将

font-size:0

放在

#container

上，并将

font-size:16px

放在子容器上

#container {
   font-size: 0;
}
#left, #right {
   font-size: 16px; //You can use font-size: initial if you don't care about IE
}

---

flexbox，

justify content:center

：如果您只希望浮动显示在内联中，但在页面上居中，请去掉浮动。

#container {
   font-size: 0;
}
#left, #right {
   font-size: 16px; //You can use font-size: initial if you don't care about IE
}