Отображать элементы встроенного блока не будут выровнены по вертикали

Question

Я пытаюсь вертикально выровнять две коробки внутри контейнера, но он не работает.

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    text-align: center; 
 
    background-color: yellow; 
 
} 
 
.suggested-box { 
 
    width: 40%; 
 
    height: 80%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    box-shadow: 0px 0px 1px 0px #000; 
 
}

<section class="container"> 
 
    <section class="suggested-box"></section> 
 
    <section class="suggested-box"></section> 
 
</section>

Я искал вокруг подобных вопросов, но не нашли какой-либо полезный ответ.

Answer 1

вам необходимо добавить высоту строки в контейнере

.container{ 
    // size(width, height) 
    @include size(97%, 250px); 
    margin: 0 auto; 
    text-align: center; 
    line-height: 250px; //line-height equal the height 
} 

jsfiddle: http://jsfiddle.net/zhouxiaoping/gok4r2tr/