Как позиционировать блочный элемент по центру вертикально внутри другого?

Question

[nluparev]

Нужно позициорировать блочный элемент внутри другого по середине вертикально.

Хардкодить значения типа "padding-top: 100px" не вариант, т.к. сайт адаптивный. В идеале нужно адаптивное решение которое будет позиционировать по центру даже если размеры контейнера будут меняться.

Заранее спасибо :)

Comments

[nluparev]

нашел следующее решение которое для меня работает:

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.child {
    align-self: center;
}

Answer 1

[Антон Антон]

если у родительского элемента display table-cell, то у него vertical-align:middle нормально работает

Comments

[nluparev]

тоже пробовал. У меня получилось сделать через flexbox. Все норм работает

[Сергей Горячев]

nluparev: и правильно сделал, нечего доисторические костыли в виде table-cell лепить.

Answer 2

[Артём]

https://css-tricks.com/centering-css-complete-guide/

Comments

[nluparev]

да, натыкался уже на эту статью перепробовал из неё все. Там используется "position: absolute" мне так нельзя. У меня колонки из Zurb Foundation и мне нужно контент внутри колонки позиционировать вертикально

[Артём]

nluparev: ну flex спокойно должен работать.

Answer 3

[Negwereth]

Flex, например.
Есть ещё фокус с

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: {value};
height: {height};

Работает только если задать фиксированный размер блоку.

Answer 4

[Сергей Лещенко]

Ну это классика. В большинстве встречается 6 стандартных приемов выравнивания. Самый простой, на мой взгляд, это Flex-box и display:table-cell. Также можно с помощью position: absolute и relative. Ну и еще можно использовать плавающий контейнер.