CSS 文字图片对齐垂直居中

CSS 文字图片对齐垂直居中是前端开发中常见的需求，在这里我们介绍几种实现方法。

img{
    vertical-align:middle;/*设置图片的垂直居中*/ 
}

以上代码可以让图片垂直居中，但是图片和文字之间还有一点间隙，可以通过设置line-height来解决：

div{
    height:200px;/*设置div的高度*/ 
    line-height:200px;/*设置line-height等于div的高度*/ 
}
img{
    vertical-align:middle;/*设置图片的垂直居中*/ 
}

以上方法可以让图片和文字垂直居中，但在图片高度超过文字行高时，会出现问题，可以使用absolute和margin来解决：

div{
    position:relative;/*设置div的定位*/ 
    height:200px;/*设置div的高度*/ 
}
img{
    position:absolute;/*设置图片的定位*/ 
    top:50%;/*设置图片距离顶部的距离*/ 
    margin-top:-50px;/*设置图片的margin-top等于图片高度的一半*/ 
}

最后，我们介绍一种更简单的方法：

div{
    height:200px;/*设置div的高度*/ 
    display:flex;/*设置弹性布局*/ 
    align-items:center;/*设置垂直居中*/ 
}

以上代码使用了CSS3中的弹性布局来实现文字图片的垂直居中，代码简单，效果很好。