Css3 Flex - Stretches The Image Instead Of Centering It?

Why does flex center stretch my image instead of centering it? css: .flex-centre { display: flex; justify-content: center; flex-direction: column; text-alig

Solution 1:

You have set flex-direction: column and now main axis is Y and cross axis is X. So because align-items distribute items along cross-axis (and default value of align-items is stretch) now you want to use align-items: center to position your image horizontally and prevent image to stretch.

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

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

Another option is to set left and right margin of image to auto

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

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