html - 中央に沿って2つの異なるサイズのdivを揃えます

Question

この質問はここで尋ねられましたが、divのサイズはそれほど変わらないため、解決策は機能しているようです。

私の質問は、親コンテナの中央に沿って任意のサイズの2つの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