如何实现图片居中
你的图片真的垂直居中了吗
.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
}
.img{
vertical-align: middle;
}
vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)
由此可见，vertical-align: middle;属性的作用并不是将子元素的垂直中点和父元素的垂直中点对齐，而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。 对于元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐，可参考下图：
基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。但是字符X在父元素中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。而当字体大小为0时，基线的位置就等于中线的位置，我们通过设置父元素的font-size:0
需求二：图文混排，使图片在未知高度的div中垂直居中
.wrapper{
background: #cc8548;
margin: 40px auto;
padding: 20px;
width: 500px;
display: flex;
flex-direction: row;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
font-size: 0;
}
.img{
vertical-align: middle;
align-items: center;
}
.text{
flex: 1;
padding-left: 50px;
font-size: 20px;
}
<div class="wrapper">
<img class="img" src="img1.jpg">
<div class="text">
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
富强民主文明和谐，自由平等公正法制，爱国敬业诚信友善。
</div>
</div>
