沿着中间对齐两个不同大小的div

Question

此问题被问到here，解决方案似乎正常工作，因为div的大小差别不大。

我的问题是如何在父容器的中间有效地对齐两个任意大小的div？

HTML

<div id="container">
    <div id="big">
    </div>
    <div id="small">
    </div>
</div>

和CSS

#container { }
#big {width:100px; height: 100px; display:inline-block;border:1px solid black; vertical-align:middle; }
#small {width:50px; height: 50px; display:inline-block; border:1px solid red;}

请参阅on JsFiddle

修改 我真正想要的是这样的事情

Answer 1

足以做到这一点

#container { text-align: center; }

jsFiddle

---

修改 如你所愿，你需要

#small { vertical-align:middle; }

jsFiddle 2

Answer 2

将vertical-align:middle添加到#small

#small {
width:50px; 
height: 50px; 
display:inline-block;
 border:1px solid red; 
vertical-align:middle;
}

<强> DEMO