div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 
在曾经的 淘宝UED 招聘 中有这样一道题目:

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。
题目的难点在于两点: 
1.垂直居中; 
2.图片是个置换元素,有些特殊的特性。 
至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

转自及demo:http://www.jb51.net/css/76120.html

div图片垂直居中的更多相关文章

  1. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  2. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  4. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  5. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  6. 图片垂直居中 和 float

    //图片垂直居中, display:table-cell; vertical-align:middle;   不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...

  7. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  8. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  9. CSS让图片垂直居中的几种技巧 三种方法介绍

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

随机推荐

  1. php中date函数获取当前时间的时区误差解决办法

    例:echo date('Y-m-d H:i:s', time()); 输出时间:2008-10-12 02:32:17 但实际时间是:2008-10-12 10:32:17时间误差8个小时 PHP手 ...

  2. python模块—urllib

    1. 网页操作 urllib.urlopen(url[,data[,proxies]]) 打开一个url,返回一个文件对象,然后可以进行类似文件对象操作 url:远程数据的路径,即网址 data:表示 ...

  3. c++中vector与list的区别

    c++标准库中,容器vector和list都可以用来存放一组类型相同的数据.而且二者不同于数组的一点是,支持动态增长.但它们还是有有几点不同 (1)  vector是顺序表,表示的是一块连续的内存,元 ...

  4. vmware 使用技巧

    1.虚拟机如何进入BIOS界面? 方法: 1) 开机按F2 2) 若来不及按F2的话,可以通过以下 2. 如何让虚拟机进入安全模式? 方法:开机快速按F8 3. 当不能连接到vCenter Serve ...

  5. [问题解决] locale::facet::_S_create_c_locale name not valid

    错误: exception in initAndListen: 14043 clear tmp files caught exception exception: locale::facet::_S_ ...

  6. 製程能力介紹(SPC introduction) ─ 製程能力改善及評估

    如何改善製程能力 參考下面常態分配圖,原製程能力不足,其製成品有一定比率超出下限規格,其改善對策有二: 縮小製程變異,也就是改善Cp,提高Cp的值. 移動製程中心,也就是改善Ck,減小Ck的值. 就技 ...

  7. MongoDB存储时间

    之前一篇博客C++的时间中提到了MongoDB保存时间类型数据可以使用timestamp类型. 不过在实际编程过程中,发现保存timestamp容易,读取难.MongoDB C++的这方面的例子还没有 ...

  8. git操作标签

    操作标签 如果标签打错了,也可以删除: $ git tag -d v0.1 Deleted tag 'v0.1' (was e078af9) 因为创建的标签都只存储在本地,不会自动推送到远程.所以,打 ...

  9. poj2656---求一列数中最大数的序数而且在前面输入的更优先

    #include<stdio.h> #include<stdlib.h> int main() { int n,i; while(scanf("%d",&a ...

  10. centos6.5vpn搭建

    centos6.5vpn搭建整个搭建流程,服务端,客户端安装及测试. 达到的效果: 在安装vpn客户端的机器可通过vpn(virtual private network)专用线路(vpn主配置文件中定 ...