Центр двух divs по вертикали

Question

Мне нужна помощь, центрирующая две divs по вертикали в фиксированной ширине/высоте div, где две div масштабируются в середине родительского div. Первый дочерний div имеет максимальную высоту, поэтому он может масштабироваться динамически до некоторой степени. Как я могу сосредоточить их так, чтобы чирок и зеленые divs шли в середине синего вертикально?

JSFiddle ЗДЕСЬ:https://jsfiddle.net/850sdmhj/

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 
.color-green { 
 
    max-height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
}

<div class="subtext-container"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
</div>

Answer 1

Попробуйте display:flex собственность, чтобы сделать его работу.

Обновленный CSS:

.subtext-container { 
    position: absolute; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
} 

.color-teal { 
    max-height: 40px; 
    overflow: hidden; 
    background-color: teal; 
} 

.color-green { 
    height: 13px; 
    font-size: 9px; 
    background-color: green; 
} 

Пример скрипку: Demo

Примечание: Пожалуйста, проверьте поддержку браузера.

Поддержка браузера:http://caniuse.com/#feat=flexbox

Answer 2

Используйте следующий CSS для subtext-container

.subtext-container { 
    position: relative; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display:table-cell; 
    vertical-align:middle; 
} 

Обновлено Fiddle https://jsfiddle.net/850sdmhj/1/

Answer 3

Может быть, с помощью обертку, как

.color-обертка { положение: относительная; верх: 50%; преобразование: translateY (-50%) }

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 

 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 

 
.color-green { 
 
    height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
} 
 

 
.color-wrap{ 
 
\t position:relative; top:50%; 
 
\t -webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%) 
 
}

<div class="subtext-container"> 
 
    <div class="color-wrap"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
    </div> 
 
</div>

Answer 4

Я бы поставил .color-чирка и .color-зеленый внутри другого погружения с классом "Вертикально-Align".

<div class="subtext-container"> 
    <div class="vertical-align"> 
    <div class="color-teal">teal</div> 
    <div class="color-green">green</div> 
    </div> 
</div> 

И тогда в файле CSS:

.vertical-align{ /* This will do the trick to center content vertically */ 
    display: table-cell; 
    vertical-align: middle; 
} 

.subtext-container { 
    display: table; /* Add Display Table to the container */ 
} 

Это будет работать только если контейнер (один с дисплеем: таблицы) имеет фиксированную высоту.

Ваша скрипка с рабочим например: https://jsfiddle.net/rx79sb6m/

Также вы можете прочитать this post где вы можете найти еще 5 способов для достижения того же результата.