在特定宽度父级内居中并隐藏特定宽度的并排元素

Question

我有一个指定宽度的Parent元素。在它里面有一些儿童元素，它们的宽度也设置（使用百分比）。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS：

.parent{
    width:1000px;
}
.child{
    width:33.33%;
}

我想：

1. 让孩子居中，如果他们不占据整个父母的宽度（或换行到下一行）。
2. 同时，如果任何一个孩子没有任何内容 - 隐藏它，以便其兄弟姐妹表现得好像它不存在。

到目前为止我能想到的是什么。第一个可以给孩子们display: inline-block;。但是 - 这样他们只能被.child:empty {display :none;}隐藏起来，如果他们完全是空的话。任何空白都会影响效果。

另一方面，有漂浮物。如果我浮动孩子并给他们min-height: 0;，这种隐藏技术将忽略空白，因为（如规范所述）

  

具有零外高或负外高的浮子不会缩短线框。

但是因为父有固定的宽度，我不知道如何使结构居中。

我不想使用JavaScript。它有可能吗？

谢谢！