1.利用display:table-cell,具体代码如下:

html代码如下:

 <div class="img_wrap">
  <img src="wgs.jpg">
</div>

css代码如下:

 .img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}

效果如下:

2.采用背景法:

html代码如下:

 <div class="img_wrap"></div>

css代码如下:

.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
background: url(wgs.jpg) no-repeat center center;
}

效果如下图:

3.图片外面用个p标签,通过设置line-height使图片垂直居中:

html代码如下:

 <div class="img_wrap">
<p><img src="wgs.jpg"></p>
</div>

css代码如下:

 *{margin: 0px;padding: 0px}
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
text-align: center;}
.img_wrap p{
width:400px;
height:300px;
line-height:300px; /* 行高等于高度 */
}
.img_wrap p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}

效果图如下:

css 使图片水平垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  4. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  5. 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  9. Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半

    问题描述: 如何使按钮水平垂直居中且始终占据屏幕宽度一半 效果如下: 竖屏: 横屏: 解决方案: 使用线性布局,指定线性布局的总权重(weightSum)为1, 指定按钮的权重为其一半即0.5 布局代 ...

随机推荐

  1. 关于xml加载提示: Error on line 1 of document : 前言中不允许有内容

    我是在java中做的相关测试, 首先粘贴下报错: 读取xml配置文件:xmls\property.xml org.dom4j.DocumentException: Error on line 1 of ...

  2. 物联网框架ServerSuperIO(SSIO)更新、以及增加宿主程序和配置工具,详细介绍

    一.更新内容 1.修改*Server类,以及承继关系.2.增加IRunDevice的IServerProvider接口继承.3.修复增加COM设备驱动可能造成的异常.4.修复网络发送数据可能引发的异常 ...

  3. 异常:java.lang.LinkageError: loader constraint violation: when resolving interface method

    异常:java.lang.LinkageError: loader constraint violation: when resolving interface method "javax. ...

  4. 怎样在asp中产生10个0-99的随机数

    <% randomize for i=1 to 10 response.write cint(rnd*100) next %> randomize是随机初始化,使用rnd之前必须要先来一句 ...

  5. 你搞懂 ORACLE、 SQLSERVER、MYSQL与DB2的区别了吗

    ORACLE. SQLSERVER.MYSQL与DB2的区别--平台性:    Oracle.MYSQL与DB2可在所有主流平台上运行:    SQL Server只能在Windows下运行: --安 ...

  6. BCS 字段显示格式化

    技术部分 1.使用SPD添加外部数据源时保证,安装SPD的客户机在同一个域中,并且在管理中心给Business Data Connectivity Service 授权   2.生成的外部数据没法再后 ...

  7. [Android]Android端ORM框架——RapidORM(v2.1)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6020412.html [Android]Android端ORM ...

  8. dyld 加载 Mach-O

    ➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...

  9. 在 CentOS7 上部署 MySQL 主从

    在 CentOS7 上部署 MySQL 主从 通过 SecureCRT 连接至 MySQL 主服务器: 找到 my.cnf 文件所在的目录: mysql --help | grep my.cnf 一般 ...

  10. vim的高亮查找操作

    使用了VIM这么久,却一直无法牢记一些基本的操作指令.今天查找一个关键字时,想不起来怎么查找“下一个”,于是google之并解决,顺便把有用的都贴过来罢. 查找指令:/xxx 往下查找?xxx 往上  ...