css设置图片垂直居中的方法：
一、使用flex实现垂直居中
利用css flex实现垂直居中，有些浏览器可能不兼容flex。
首先要创建一个包裹着图片的div元素，然后定义基础属性。
以下图片img宽度为（设置为）100px，高度为100px。
HTML代码部分：
<style>.flexbox{width: 300px;height: 250px;background:#ccc;display: flex;align-items: center;text-align:center; }.flexbox img{width: 100px;height: 100px;margin:0 auto;}</style><div class="flexbox"><img src="img.png" alt=""></div>
二、利用Display: table;实现img图片垂直居中
1、先创建一个div元素以及另外一个包含图片的div元素，设置样式
2、给img父元素设置display：table
3、包裹图片的父类div元素设置display:table-cell
<style>.tablebox{width: 300px;height: 300px;background: #fff;display: table;background: #ccc;}#imgbox{display: table-cell;vertical-align: middle; text-align: center;}#imgbox img{width: 100px;}</style><div class="tablebox"><div id="imgbox"><img src="img.png" alt=""></div></div>
三、用绝对定位实现垂直居中
<style>.posdiv{width: 300px;height: 300px;background: #eee;position: relative; text-align:center; }.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;margin-left: -50px;}</style><div class="posdiv"><img src="img.png" alt=""></div>
