1、移动端图片垂直居中
利用height与line-height相等：类似文字垂直居中的方法，这里图片就需要吧font-size设置为0；
这种在图片宽高不同的时候任然可以居中；
如果给一个div容器设置width:100%;height:100%;background:#ff0000;这时候如果不加position：absolute或者position:fixed;这个容器是不会显示的；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:100%;
margin-top: 0px;
height: 667px;
line-height: 667px;
font-size: 0;
text-align: center;
background-color: #A2A590;
}
div img{
width:100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="logo" id="logo" />
</div>
</body>
</html>
2、利用父容器和子容器的相对绝对定位;这种对于图片垂直居中感觉还有点不适用；这种在图片宽高不同的时候不行；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.parent{
width:375px;
height:667px;
overflow: hidden;
background:red;
position:relative;
}
.child{
background:#ccc;
height:100px;
width:100px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
当居中的元素固定宽高，也可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.part{
width:100%;
height:100%;
overflow: hidden;
background:red;
position:fixed;
top:0;
}
.box1{
background:#ccc;
height:100px;
width:100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3、这种用的是table-cell,对于图片宽高不知道的是可以的，
这种方法很简单，有的地方说需要加一个<i>的额外标签，
如果页面需要一两个居中的图片，那此方法是可推荐，
但如果很多个产品的图，那就换个方法；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.qq {
width:375px;
display:table-cell;
height:667px;
text-align:center;
vertical-align:middle;
}
i {
display:inline-block;
height:100%;
vertical-align:middle
}
.qq img {
width: 100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>
</body>
</html>
4、背景法：这个确实简单；
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</style>
<div>
</div>