对于图片如和在div中上下居中的问题困扰了偶很多年，今天终于狠下心来把它彻底搞定（实际上是因为Mackes不是专业前端，所以很少用到，经常忘记，网上有没个我喜欢的）。

在网上你会看到有用三层div通过浮动居中的，也有直接写了个dislay:table-cell;的。要么太复杂，要么没有全部适应。

下面我来讲解一下我的方法。

大家知道，在table中 只要在td上设置了 vertical-align:middle;就可以做到这一点。可是div中不行。这到底是为什么呢？

也许大家都知道table被div淘汰的原因，是因为table自带的一些样式太庞大了，页面加载的同时会同步加载样式，导致table布局的页面加载很慢。而div则只只带了一个很简单样式 display:block;。其他的样式是可以通过css样式异步加载的。

OK，因为在table中实现了我们想要的效果，那么我们可以先写个简单的table来看看这个时候table用了哪些样式使得图片可以上下居中。

然后，我用了谷歌浏览器来查看“审查元素”，有些说我用firebug可以不？答案是NO。因为谷歌浏览器的“审查元素”功能会把元素的默认样式也说明的很清楚，但是你用firebug就只能看到自己定义的，而不能看到元素的默认样式。

通过查看发现<tr>中有一个display:table-row;样式，之前我一直以为它的默认样式是display:table-column;，那会不会就是这个table-row;起的作用呢？因为网上有人用table-cell;。Just try it ！

<div id="tr" style="display:table-row;height:100px;">

<div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

</div>

Ok ！That all ！ 测试成功了，哈哈！ 原来就这么简单。

在网上你会看到 只用了talbe-cell，这个样式是table中最小单位的样式，你可以理解成 table中的td。可以在“审查元素”时发现<td>中默认就有这个样式，而<tr>中有 table-row 这个样式。table-row 就像是table中的tr一样控制了整行样式，可以联想到：行、行高；对就是跟高度有关。

所以说：以上的两个div 就像当于是table中的tr和td（看示例代码中的ID值）。但是没有用到table的庞大样式，而且我们所用的是div，所以不会对加载速度产生影响。

如果你想同时左右居中，那就用text-align:center;就可以了（这个其实不需要说明大家都知道）。

同样的像table一样，如果是多个这样的div就只要这样写：

<div id="tr" style="display:table-row; height:100px;">

<div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td1" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td2" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td3" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

。。。。。。。。

</div>

很明白吧！好了写完。

当然，千万别在真实环境下这么大长串的写， 我只是说明一下。编辑器里不好写 T_T 请体谅一下吧......

注意：height，如果没有高度就没有上下居中这一说法了。

下面是自适应宽高算法：

假设容器元素的宽高都是100px；

图片的宽是imgW，高度是imgH；

代码如下：

var imgW=$('img').width();

var imgH=$('img').height();

var imgAttr=imgW>imgH?'width':'height';(三元算法简介明了)

$('img').attr(imgAttr,100);

OK,四行搞定（也可以是两行，你懂的），记得这是jquery框架下的，所以小伙伴们不忘记引用哦 ^_^ ! ! !

 

转走请说明出处：fanslp.com 小博主就这点请求了，您就从了吧！写这么多不容易啊我。