方法一:图片尺寸未知,IE8-不支持

CSS部分:
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style> DOM部分:
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" style="margin-top:auto;margin-bottom:auto;top:0;bottom:0;position:absolute"/>
</div>

方法二:图片尺寸已知,正负margin抵消

CSS部分:
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
position:relative;
}
</style> DOM结构:
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif" height=164 style="margin-top:-82px;top:50%;position:absolute"/>//margin-top:-imgheight/2
</div>

方法三:图片尺寸未知,table-cell属性,IE8-不支持

CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
display:table-cell;
vertical-align:middle
}
</style> DOM部分
<div class="content">
<img src="http://static.cnblogs.com/images/adminlogo.gif"/>
</div>

方法四:图片大小未知,背景图片

CSS部分
<style>
.content{
width:500px;
height:500px;
border:1px solid black;
background:url('http://static.cnblogs.com/images/adminlogo.gif') center no-repeat;
}
</style> DOM部分
<div class="content">
</div>

方法五:利用IFC,创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。见http://www.cnblogs.com/aaron-shu/p/4101198.html

img标签在div里上下居中的更多相关文章

  1. 如何让图片在div里左右居中,上下居中

    如何让图片在div里左右居中,上下居中 转载▼   1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...

  2. [转]div里table居中的问题 Div与body顶部间隙

    本文转自:http://www.cnblogs.com/jinhui/archive/2008/09/24/1297729.html 将div的text-align设为center,然后将table的 ...

  3. 实现图标Icon+文字在div里自动中心居中(水平垂直居中)

    已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...

  4. 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  5. css参考文档; 官方英文说明!! 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  6. <div>里用display:block有用么?

    对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义--除非你之前对块元素的display属性重新定义过. =========================== ...

  7. div设置了居中和宽度,但是显示时宽度占100%

    <div id="bigDiv" align="center"> <div id="bottom" style=" ...

  8. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  9. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

随机推荐

  1. css属性—position的使用与页面的分层介绍

    一.引言: 在css众多属性中,position算是里面用的比较多也相对来说比较重要的属性了,它对于单个标签的“定位”.标签之间的“相对位置定位”还有网页的分层来说十分重要! 二.“定位的实现”具体介 ...

  2. [UE4]GameUserSettings

  3. 凭什么说AMQP比JMS优秀啊?JMS才是真正实现了一个客户端调用多种产品的消息中间件啊

    一.AMQP 历史​ 消息队列(Message Queue)起源于一位来自 MIT 的硬件设计教育工作者 Vivek Ranadivé 设想了一种通用软件总线,就像主板上的总线那样,供其他应用程序接入 ...

  4. 关于把Json数据绑定到select2中

    最近做的一个项目中用到select2,想把Json的数据绑定到select2中,select2默认的能够接受的json格式的数据是以{id:"",text:''}这样的键值对来保存 ...

  5. Postgres安装

    yum install zlib-devel gcc make #创建用户和组groupadd postgresuseradd -g postgres postgres mkdir -p /usr/l ...

  6. 第9章 应用层(5)_文件传输协议FTP

    6. 文件传输协议FTP 6.1 FTP主动和被动模式 (1)FTP协议 ①与其他协议不同,FTP协议在客户端访问FTP服务器时需要建立两个TCP连接.一个用来传输FTP命令,一个用来传输数据. ②在 ...

  7. Android之socket多线程(二)

    使用ServerSocket创建服务器端: public static void main(String[] args) throws IOException { // TODO Auto-gener ...

  8. delphi HTML转义字符编码转换

    网上很多把HTML转换成纯文本格式的方法很多思路都是用正则表达式或者分析html代码替换的方法. 本文是利用IE完成转换,即利用IHTMLDocument2接口. Denon天Denon龙Denon ...

  9. C语言中 有符号数、无符号数、整数溢出 (转)

    #include<stdio.h> void main() { int l=-1; unsigned int c=135; printf("%u\n",l+c); } ...

  10. 学习js第三天小结

    1.冒泡排序分析: 例:将数组[9,8,7,6,5,4,3,2,1,0]按照从小打大的顺序进行冒泡排序. 演变过程: 第一趟: 8,7,6,5,4,3,2,1,0,9    比较了9次: 第二趟: 7 ...