html - 沿中间对齐两个不同大小的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

将 vertical-align:middle 添加到 #small

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

DEMO