Выровнять два разных размера divs по середине

Question

Этот вопрос был задан here и решение кажется работать, потому что divs не так отличаются по размерам.

Мой вопрос в том, как мы можем эффективно выровнять два divs произвольных размеров вдоль середины родительского контейнера?

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

EDIT То, что я действительно хочу что-то вроде этого

Answer 1

Добавить vertical-align:middle в #small

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

DEMO

Answer 2

Его достаточно, чтобы сделать это

#container { text-align: center; } 

jsFiddle

---

Редактировать Как вы хотите сейчас, вы должны

#small { vertical-align:middle; } 

jsFiddle 2