图片垂直居中

图片居中在很多地方需要用到，水平居中很好实现，垂直居中有点麻烦，这段时间在项目中遇到了好几处这样的问题，分享给大家。

需求一：未知图片大小，使图片在高度固定的区域内垂直居中

大家都习惯在应该是图片垂直居中的地方先设置图片父元素的行高line-height等于其高度height，然后对图片设置vertical-align:middle来达到这种效果。首先我们先来看下这种方式的效果：

.wrapper{
    background: #cc8548;
    margin: 40px auto;
    width: 500px;
    height: 300px;
    line-height: 300px;
    text-align: center;
}
.img{
    vertical-align: middle;
}

<div class="wrapper">
        <img class="img" src="img1.jpg">
</div>

其效果如下：

貌似垂直居中了

是不是看着这样就垂直居中了？
其实并没有居中，只是因为上下差别太小不好看出而已，我们把父元素的高度缩小一下就很明显了：

.wrapper{
    background: #cc8548;
    margin: 40px auto;
    width: 500px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.img{
    vertical-align: middle;
}

很明显垂直没有居中
对于vertical-align这个属性，W3C给出的说明是：

vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高，且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样，常用的解决办法是将行内元素设置display:inline-block

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来使图片达到完成垂直居中的效果：

.wrapper{
    background: #cc8548;
    margin: 40px auto;
    width: 500px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 0;
}
.img{
    vertical-align: middle;
}

完全垂直居中

需求二：图文混排，使图片在未知高度的div中垂直居中

使用场景大概是图文混排，左边是图片，右边为文字，文字多少未知，图片垂直居中。

文字较少时，图片和文字分别垂直居中
文字较多时，图片垂直居中

这里使用flex布局来解决图文混排的问题，其代码如下：

.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>

over~ QAQ