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设置垂直居中