CSS3 flex - растягивает изображение, а не центрирует его?

Question

Почему центр flex растягивает мое изображение, а не центрирует его?

CSS:

.flex-centre { 
     display: flex; 
     justify-content: center; 
     flex-direction: column; 
     text-align: center; 
     height: 100%; 
     width: 100%; 
} 

HTML:

<div style="height: 400px; width: 400px; background: #ccc"> 
    <div class="flex-centre"> 
     <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
    </div> 
</div> 

Результат:

Любые идеи?

jsfiddle

Answer 1

Вы установили flex-direction: column и теперь главная ось Y и кросс оси X. Таким образом, потому что align-items распределять элементы вдоль поперечной оси (и значение по умолчанию из align-items является stretch) теперь вы хотите использовать align-items: center, чтобы разместить изображение горизонтально и предотвратить растягивание изображения.

.flex-centre { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div style="height: 400px; width: 400px; background: #ccc"> 
 
    <div class="flex-centre"> 
 
    <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
 
    </div> 
 
</div>

Другой вариант, чтобы установить левый и правый margin изображения в auto

.flex-centre { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
img { 
 
    margin: 0 auto; 
 
}

<div style="height: 400px; width: 400px; background: #ccc"> 
 
    <div class="flex-centre"> 
 
    <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
 
    </div> 
 
</div>