在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很 方便的使用vertical-align属性来对齐其中的内容了。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

<style type="text/css">

   body {

   height:100%;

   }

   #box{

    width:500px;height:400px;

    display:table;

    text-align:center;

    border:1px solid #d3d3d3;background:#fff;

   }

   #box span{

    display:table-cell;

        vertical-align:middle;

   }

     #box img{

    border:1px solid #ccc;

    }

    </style>

    <!--[if lte IE 7]>

    <style type="text/css">?

    #box{

        position:relative;

        overflow:hidden;

    }

    #box span{

        position:absolute;

        left:50%;top:50%;

    }

    #box img{

        position:relative;

        left:-50%;top:-50%;

    }

    </style>

    <![endif]-->

    </head>

<body>

<div id="box">

 <span><img src="data:images/demo_zl.png" alt="" /></span>

</div>

</body>

</html>

方法二

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

     <style type="text/css">

     body {

         height:100%;

     }

     #box{

     width:500px;height:400px;

     display:table-cell;

     text-align:center;

     vertical-align:middle;

     border:1px solid #d3d3d3;background:#fff;

     }

     #box img{

     border:1px solid #ccc;

     }

     </style>

     <!--[if IE]>

     <style type="text/css">?

     #box i {

         display:inline-block;

         height:100%;

         vertical-align:middle

         }

     #box img {

         vertical-align:middle

         }

     </style>

     <![endif]-->

     </head>

     <body>

     <div id="box">

         <i></i><img src="data:images/demo_zl.png" alt="" />

     </div>

     </body>

     </html>

方法三

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>

     <style type="text/css">

     body {

         height:100%;

     }

     #box{

         width:500px;height:400px;

         text-align:center;

         border:1px solid #d3d3d3;background:#fff;

     }

     #box p{

         width:500px;height:400px;

         line-height:400px;  /* 行高等于高度 */

     }

     /* 兼容标准浏览器 */

     #box p:before{

         content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */

         margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */

         visibility:hidden;  /*设置成隐藏元素*/

     }

     #box p img{

         *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */

         vertical-align:middle;

         border:1px solid #ccc;

     }

     </style>

     </head>

     <body>

     <div id="box">

         <p><img src="data:images/demo_zl.png" alt="" /></p>

     </div>

     </body>

     </html>

文章来自：http://www.nowamagic.net/librarys/veda/detail/1950

CSS让图片垂直居中的几种技巧的更多相关文章

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

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

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  4. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  5. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  6. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

  9. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

随机推荐

  1. Java源代码-迭代器模式

    Java无疑是最成功的项目之一了,而在其中学习设计模式和架构设计,无疑是最好不过了. 概念: 提供一种方法访问容器中的各个元素,而又不暴露该对象的内部细节. 使用场景: 和容器经常在一起,我们定义了一 ...

  2. 全文检索学习历程目录结构(Lucene、ElasticSearch)

    1.目录 (1) Apache Lucene(全文检索引擎)—创建索引:http://www.cnblogs.com/hanyinglong/p/5387816.html (2) Apache Luc ...

  3. OData V4 系列 .net应用

    OData 学习目录 添加 OData Client Code Generator 扩展 添加OData T4生成工具 修改 T4 模板的 MetadataDocumentUri 运行Web项目,之后 ...

  4. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  5. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  6. Aspose.Words基本操作

    一个非常好用的控件. 基本的操作可以参考伍大神的文章: http://www.cnblogs.com/wuhuacong/archive/2012/08/30/2662961.html 在这里补充四点 ...

  7. SharePoint 2013 托管导航及相关配置

    设计完善的导航可告诉您网站的用户大量有关网站所提供业务.产品和服务的信息.通过更新导航背后的分类法,可以推动业务并保持更新,而不必在过程中重新创建其网站导航.在 SharePoint 2013 中,可 ...

  8. IOS开发基础知识--碎片32

    1:动画属性UIViewAnimationOptions说明 a:常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子 ...

  9. Android 刷新相册

    Android4.4之前: sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED,Uri.parse("file://" + f ...

  10. android:使用RemoteView自定义Notification

    //网上相关内容较少,遂记录下来,备忘. //依然以音乐播放器demo为例. 效果截图 //锤子手机上的效果 step1 准备自定义layout 常规的实现方式,并不会因为是用于notificatio ...