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

Question

此处提出了这个问题，并且该解决方案似乎有效，因为 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;}

参见JsFiddle

编辑 我真正想要的是这样的

Answer 1

添加vertical-align:middle到#small

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

演示

Answer 2

足以做到这一点

#container { text-align: center; }

jsFiddle

---

编辑 如你所愿，你需要

#small { vertical-align:middle; }

jsFiddle 2