图片上下垂直居中各方法

方法一：

display:box;box-pack:center;box-align:center;

display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;

display:-moz-box;-moz-box-pack:center;-moz-box-align:center;

方法二：

父级 display:flex;justify-content:center;align-items;   有的手机系统不支持

方法三：

父级 display:flex;子级：align-self:center;margin:0 auto;

方法四：

添加辅助元素

<p style="200px"><img src="asdf.png"><span>123</span><i></i></p>

img{vertical-align:middle;display:inline-block;}

i{display:inline-block;height:100%;vertical-align:middle;}

span{display:inline-block;vertical-align:middle;}

方法五：

父元素Div position:relation

子元素Div position:absolute;left:50%;top:50%;margin-left:-width*50%;margin-top:-width*50%;

方法六：

父元素 display:table-cell;vertical-align:middle; height:2rem;text-align:center; 父元素高度固定

子元素图片 vertical-align:middle;

 

兼容写法（手机不支持flex，识别box）

首先是定义容器的 display 属性：

.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}