使用CSS在父div中居中任意数量的div

我有一个带有随机数目的子DIV的父DIV（菜单栏）。我正在寻找一个干净、简单的CSS，它总是将子div水平居中，而不管它们的宽度或div的数量（只要它们适合父div）。我不想计算所有的宽度或使用绝对定位

在研究了几种解决方案后，我提出了这段代码，但子div仍然不能正确居中，特别是当您用文本或图像填充它们时

HTML:

<div id="menubar">
   <div id="button">too much text will offset the other buttons</div>
   <div id="button">b2</div>
   <div id="button">b3</div>
</div>

#menubar {
    position:absolute;
    bottom:0px;
    background-color: #00A0E2;
    width:100%; height:80px;
    text-align:center;
} 

#button {
    margin: 5px auto 5px auto;
    width:120px;height:70px;
    display:inline-block;
    background-color:white;
    cursor: pointer;
}

---

我创建了这个JSFiddle来说明我的问题：

为什么不使用一个无序列表，然后使用css将它们放在中间呢

您忘记了将内联元素垂直对齐，这样当它们的高度不相同时，就可以正确显示它们。这是一个例子。我还删除了按钮的

id

属性，并将其更改为

类

---

EDIT:jsfiddle.net目前对我来说不是很好。引入的更改是

vertical align:top

到

.button

类。

对我来说，这些都是正确（水平）居中的。你是说它们应该垂直居中吗？我需要水平居中，请参阅我添加的JSFIDLE。我可以使用无序列表来实现这一点吗？看看这个，你可以根据需要编辑ul和li。对不起，我有点困惑。看起来有人已经给了你答案。据我所知，答案仍然是垂直居中的。上面的答案是有效的。哇，这正是我需要的。非常感谢！