我有一个流体宽度布局。左右列具有固定宽度，我的中心列在指定的最大和最小宽度之间更改其宽度，因为浏览器宽度更改或屏幕分辨率更改。如下图所示：
如您所见，中间列有一些小容器，它们可以容纳多种产品等。
我遇到的问题是，当宽度发生变化并且中间列不能容纳 3 个容器时，1 个会落在下面，因为它们是浮动的，然后看起来像下面这样：
现在容器右侧的这个空间看起来很丑。我想要做的是让它们保持居中，如果当宽度减小时一个下降到下方，那么两个应该出现在中间列的中心，当另一个下降时，剩下的 1 个容器也应该出现在中间，如下所示：
我可以只用 css 做到这一点吗？或者我需要引入一些脚本语言来动态执行它？
这是我正在使用的容器的 css
.prod-container{
float: left;
width: 180px;
height: 290px;
margin: 2px 6px;
border: 1px solid black;
}