div中图片的处理-居中垂直

经常会遇到img垂直居中div的问题，下面我们来整理下

一.水平居中

1.text-align:center

.wrap1{
	text-align: center;
	width: 500px;
	background-color: #000;
	height: 100px;
}
.wrap1 img{
	width: 100px;
	height: 50px;
}

<div class="wrap1">
	<img src="img-03.png">
</div>

2.margin: 0px auto;（要注意：把img变成块级元素）

.wrap1{
	width: 500px;
	background-color: #000;
	height: 100px;
}
.wrap1 img{
    width: 100px;
    height: 50px;
    margin: 0px auto;
    display: block;
}

注意：a.这个图片的宽度有时候是不一定要设置，前提是浏览器自己能获取到图片的宽，否则需要我们自行定义个宽。

b.局部可以覆盖全局，局部写margin是会生效，不受body上的margin影响的。让一个区块居中显示：margin:0 auto;是对的，但ie6-8来看，依然是没用的，要另外写一句：text-align:center;

3.列表中使用text-align: center;li{display: inline;}

.wrap4{width: 500px;background-color: #000;height: 180px;}
.test4{text-align: center;padding: 15px;}
.test4 li{display: inline;}
.test4 a{padding: 2px 6px;color: #fff;border:1px solid #fff;}

<div class="wrap4">
			<ul class="test4">
				<li><a href="#">1</a></li>
			</ul>
			<ul class="test4">
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			</ul>
			<ul class="test4">
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
			</ul>
		</div>

4.position: relative; left:50%;margin-left:;相对定位绝对定位来做

二.垂直

1.display: table-cell; vertical-align: middle;

.wrap{
	background-color: #000;
	width: 500px; 
	color: #fff;
	height: 100px;
	display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
	vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
	*position: relative;
}
.vertical-wrap{*position: absolute; *top:50%;}
.vertical{*position: relative;*top: -50%;}

<div class="wrap">
		<div class="vertical-wrap">
			<div class="vertical">
				<p>Hello wrold</p>
				<p>Hello wrold</p>
			</div>
		</div>
	</div>

注意：因为display: table-cell;不兼容ie7所以才要使用

.vertical-wrap{*position: absolute; *top:50%;}
.vertical{*position: relative;*top: -50%;}

如果在父级.wrap中加入“text-align: center;”则垂直居中。

a:图片也是可以

.wrap{
	width: 200px; 
	color: #fff;
	height: 200px;
	display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
	vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
	*position: relative;
	border:1px solid #ccc;
	margin-left: 20px;
	text-align: center;
}
.wrap .vertical-wrap{*position: absolute; *top:50%;}
.wrap .vertical{*position: relative;*top: -50%;}
.wrap img{width: 100px;height: 50px;}

<div class="wrap">
		<div class="vertical-wrap">
			<a class="vertical">
				<img src="img-03.png"/>
			</a>
		</div>
	</div>

但是在ie7中text-align: center;并不会使其图片居中。

b:如果延伸到列表中时，ie7以下不支持。

.m10 li{
	width: 200px; 
	color: #fff;
	height: 200px;
	display: table-cell;/*ie7和ie6都不能识别 display: table-cell;*/
	vertical-align: middle;/*ie7和ie6能识别vertical-align:middle; */
	*position: relative;
	text-align: center;
	border:1px solid #ccc;
	margin-left: 20px;
}
.m10 li .vertical-wrap{*position: absolute; *top:50%;}
.m10 li .vertical{*position: relative;*top: -50%;}
.m10 li img{width: 100px;height: 50px;}

<ul class="m10">
	<li>
		<div class="vertical-wrap">
			<a class="vertical">
				<img src="img-03.png"/>
			</a>
		</div>
	</li>
	<li>
		<div class="vertical-wrap">
			<a class="vertical">
				<img src="img-03.png"/>
			</a>
		</div>
	</li>
	<li>
		<div class="vertical-wrap">
			<a class="vertical">
				<img src="img-03.png"/>
			</a>
		</div>
	</li>
</ul>

三.垂直居中

1.原理： 利用vertical-align实现垂直，决定行高的是行内最高的元素的值。

.m10 li{
	float: left;
	width: 200px; 
	height: 200px;
	text-align: center;
	border:1px solid #ccc;
}
.m10 li span{height: 100%;display: inline-block;vertical-align: middle;}
.m10 li img{width: 100px;height: 50px;vertical-align: middle;}

<ul class="m10">
	<li>
		<span></span>
		<img src="img-03.png"/>
	</li>
	<li>
		<span></span>
		<img src="img-03.png"/>
	</li>
	<li>
		<span></span>
		<img src="img-03.png"/>
	</li>
</ul>

ie7都是可以兼容的

     很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table。

未知高度的图片在div设置垂直居中