Заголовок над изображением с помощью Display:Table Cell

Question

Я пытаюсь получить заголовок для отображения поверх изображения и расположить его по центру по горизонтали и вертикали с помощью display:table-cell.

Конкретный пример - http://ollymoss.com/ - как при наведении курсора появляется заголовок каждого плаката и центрируется по вертикали / горизонтали. Я проверил элемент и увидел, что они используют Display: Table-cell, но я не могу его воспроизвести.

Если кто-нибудь знает, как это сделать, это было бы здорово!

Это рассматриваемая страница: http://sathyaram.com/graphic

Я пытаюсь сделать так, чтобы названия каждой плитки отображались на плитке по центру по вертикали / горизонтали.

Если есть лучший метод, чем display: table-cell, я бы хотел знать! Я знаю, что вы можете использовать положение: абсолюты / родственники, но я бы хотел, чтобы оно было отзывчивым, и я не уверен, как это сработает!

Я пытаюсь сделать это специально в CSS - не знаю, как использовать jQuery!

Большое спасибо!

Answer 1

Если вы хотите отобразить заголовок по центру по горизонтали и вертикали, вы можете сделать это в CSS, я думаю:

.yourTitleWrap {
    text-align: center;
    width: 100%;
    height: 50px /* with 50px for example ... */
    position: absolute;
    top: calc(50% - 25px);
}

Для верхнего значения 25px представляет высоту / 2, обычно оно должно работать и центрировать ваш заголовок в центре родительского элемента div.