Bir görüntüyü otomatik yükseklik ve maksimum yükseklikle ortalayarak merkezleme

Question

Dikey yüksekliği, yatay genişliği (% 100) doldurmak istiyorum çünkü yüksekliği otomatik kullanan bir görüntüyü ortalamak çalışıyorum. Konteyneri, bir maksimum yükseklik değeri ve taşma-y ile tanımlanmıştır.

HTML:

<figure> 
 
    <img src="http://lorempixel.com/500/500/" alt="Imagem" /> 
 
    <figcaption> 
 
    <p>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</p> 
 
    </figcaption> 
 
</figure>

CSS:

figure { 
 
    padding: 5px 0; 
 
    max-height: 300px; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
} 
 
figure>img { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
    top: -50%; 
 
} 
 
figcaption { 
 
    bottom: 0; 
 
    position: absolute; 
 
    background-color: #1e1e1e; 
 
    color: white; 
 
    padding: 5px 10px; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    width: 100%; 
 
}

Answer 1

bu deneyin:

figure > img { 
position: relative; 
margin-top:50%; 
transform:translateY(-50%); 
} 

http://jsfiddle.net/kr9q3a0h/1/

Answer 2

Bu hile kullanabilirsiniz: Bilinmeyen içerik boyutunu ortalamak için bazı sözde sınıfları kullanın:

https://css-tricks.com/centering-in-the-unknown/

hüner tam boyutuna önce içeriğini ayarlamak olduğunu ihtiyacın var. Bu, içeriğin daima merkezileştirilmesine neden olur.

Demo: http://codepen.io/chriscoyier/pen/gsodI

/* This parent can be any width and height */ 
.block { 
    text-align: center; 

    /* May want to do this if there is risk the container may be narrower than the element inside */ 
    white-space: nowrap; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
/* This parent can be any width and height */ 
.block { 
    text-align: center; 

    /* May want to do this if there is risk the container may be narrower than the element inside */ 
    white-space: nowrap; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
}