Текст по центру блока?

Question

[GoodProject]

Доброе.

1.Как лучше всего расположить данный текст по центру?



2. Желательно что бы можно было 2 строки по центру расположить. Описание и ссылку.

Сейчас это маска на 100% ширины и высоты, появляется при наведении.

Заранее спасибо!

Answer 1

[Виталий Инчин ☢]

Одно в другое и vertical-align: center;.

Answer 2

[Александр Батухтин]

top: 50%;
transform: translate(0, -50%);

А так не прокатит?

Comments

[GoodProject]

угу, спс

[holfza]

GoodProject: Не забудьте отметить как решение

Answer 3

[Serdji]

Можно попробовать с помощь Flexbox верстки. Видосики на эту тему тут

Comments

[GoodProject]

Да, знаю, но желательно без Flex... IE 10.

Answer 4

[Дмитрий Пыркин]

абсолютное позиционирование и left:50% и top:50% margin-left: - половина от ширины блока margin-top - половина от высоты блока

Comments

[GoodProject]

У меня стоит плитка Masonry и там ширина вроде автоматом расчитывается либо 25% + высота расчитывается из высоты монитора (33.34.vh) + нужна адаптивность

[Aborrol]

Эмуляция таблицы у родителя(display:table) у дочернего(display:table-cell; vertical-align:center) и будет все четко по центру.

Answer 5

[Lumore]

codepen.io/anon/pen/VvbRxZ

Answer 6

[GoodProject]

Решил проблему что выставил line-height: 33.34vh; такой же как и у блока, но за идеи спс.

Comments

[dk-web]

line-height сработал с двумя строчками? GoodProject

[GoodProject]

dk-web: не) если 2 строки добавлю придется что то другое использовать..