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

方法一

将外部容器的显示模式设置成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. tomcat 自定义classpath（亲自测试）

    因为一直以来使用tomcat和weblogic作为应用服务器为主,最近在升级新中间件的过程中遇到一个问题,我们的web前端应用现在升级是进行全量包升级的,因为现在的系统架构为前端和后端通过rpc框架交 ...

  2. CSS的::selection使用方法

    请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm CSS改变默认文本选中的颜色的方法 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个 ...

  3. MYSQL进阶，新手变司机

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...

  4. Linux安全基础：sed命令的使用

    sed 是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作. Sed本质上是一个编辑器,但是它是非交互式的,这点与VIM不同:同时 ...

  5. 好神奇的代码，可以让匿名用户对特定SharePoint 列表拥用添加列表项的权限哦

    如果你不使用代码,很难从界面上去设置列表的匿名用户(如果可以请告诉我,我会自动删除这个博文)拥有列表项的添加权限. 其实这种需求是非常必要的,比如: 1.允许新用户去提交一个注册申请, 2.在召集临时 ...

  6. 【转】如何使App从后台返回前台时，显示指定界面

    用户操作App至任意界面,然后按home键切到后台,然后再从后台返回前台后,如何将App显示到指定界面? 对于这个需求,具体来说分2种情况: 指定界面是一种盖在整个App上的效果.例如: 有道云笔记的 ...

  7. iOS 实用博客整理(连载版)

    iOS 实用博客整理(连载版) 本博客为本人觉得不错的博客的暂存地,并不是本人所写. 1.iOS开发 如何适配iOS10? 2.UIWebView和WKWebView的比较和选择 3. 如何快速的开发 ...

  8. 手机APP创建桌面快捷方式

    预览: 需要权限:   <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT& ...

  9. 用户故事驱动的敏捷开发 – 2. 创建backlog

    本系列的第一篇[用户故事驱动的敏捷开发 – 1. 规划篇]跟大家分享了如何使用用户故事来帮助团队创建需求的过程,在这一篇中,我们来看看如何使用这些用户故事和功能点形成产品backlog.产品backl ...

  10. [Erlang 0107] Erlang实现文本截断

       抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人 问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3, ...