Вертикально центр содержания в DIV, где размеры устанавливаются изображения

Question

У меня есть позиционирован относительно figure с изображением в следующим образом:

<figure> 
    <img src="image.jpg" width="100%" /> 
</figure> 

figure { 
    position: relative; 
    display: block; } 

figure берет его высота от изображения. Теперь, скажем, я добавляю абсолютно позиционированный контент в figure, который будет сидеть поверх изображения. Содержимое не имеет установленной высоты и может быть многострочным. Я обычно делают такие вещи, как это:

<figure> 
    <img src="image.jpg" width="100%" /> 
    <figcaption> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> 
    </figcaption> 
</figure> 

figure { 
    position: relative; 
    display: block; } 

figcaption { 
    position: absolute; 
    display: table; 
    top:0; right:0; 
    bottom:0; left:0; 
    width:100%; height:100%; } 

figcaption span { 
    display: table-cell; 
    vertical-align: middle; } 

Однако, несмотря на figcaption со 100% высоты и ширины, а также все 4 позиционирований установлено в 0, это еще не заполнит всю фигуру, то есть вертикальная центрирование не работает.

Есть ли способ сделать figcaption взять высоту 100%, когда figure занимает высоту от изображения внутри? Или есть другой способ вертикально сосредоточиться в этой ситуации?

Answer 1

Вы просто должны установить margin: auto; на figcaption, вы были очень близки.

figure { 
 
    position: relative; 
 
    display: block; 
 
} 
 
figcaption { 
 
    position: absolute; 
 
    display: table; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; /* Added */ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
figcaption span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<figure> 
 
    <img src="image.jpg" width="100%" /> 
 
    <figcaption> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> 
 

 
    </figcaption> 
 
</figure>

Answer 2

Установка верхнего и нижнего уровня на 0 не автоматически центрирует его. Вот пример: http://jsfiddle.net/sgcdpert/

figcaption { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    }