Why does flex center stretch my image instead of centering it?
css:
.flex-centre {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100%;
width: 100%;
}
HTML:
Result:
Any ideas?
解决方案
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%;
}
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;
}