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

方法一

将外部容器的显示模式设置成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. angularjs—指令input

    input[text] input一般和ngModel结合使用来实现双向绑定,同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填(ngRequired可以控 ...

  2. JavaScript 变量

    一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...

  3. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十二）水情雨情模块

    config.xml文件的配置如下: <widget label="水情" icon="assets/images/water.png" config=& ...

  4. Java—byte小结

    1.声明byte[]数组: private static final byte[] XINTIAO = { (byte) 0xEE, (byte) 0x00 }; 2:将多个bute[]数组合并成一个 ...

  5. Linux系统安装NoSQL（MongoDB和Redis）步骤及问题解决办法

    ➠更多技术干货请戳:听云博客 如下是我工作中的记录,介绍的是linux系统下NoSQL:MongoDB和Redis的安装过程和遇到的问题以及解决办法: 需要的朋友可以按照如下步骤进行安装,可以快速安装 ...

  6. Mac版PhpStorm之XAMPP整合apache服务器配置

    版权声明:本文为博主原创文章,未经博主允许不得转载. 选择在PhpStorm集成apache服务器,下面是我自己的亲测的步骤. 1.如何修改apache默认端口 xampp apache默认的http ...

  7. tableview左滑按钮 tableviewcell自定义左滑按钮

    当我们在使用tableview时,往往需要在cell左滑时显示一个或是多个按钮,但系统默认的只可显示一个,如常见的删除按钮,那么当我们的需求要求要有多个按钮时又该怎么办呢,我们往下看. 首先,现看看系 ...

  8. Mac使用极简教程

    最近领导让我写一篇关于Mac的使用教程,因为使用人群未知,所以尽量写的通俗易懂,可谓是关于Mac电脑使用的精简教程吧,在此发表出来以供参考. Mac因为安全性而闻名,我们拥有了一部Mac,那么我们来了 ...

  9. 基于Flume+LOG4J+Kafka的日志采集架构方案

    本文将会介绍如何使用 Flume.log4j.Kafka进行规范的日志采集. Flume 基本概念 Flume是一个完善.强大的日志采集工具,关于它的配置,在网上有很多现成的例子和资料,这里仅做简单说 ...

  10. sublime text2 bracketHighLighter 配置

    一.BracketHighlighter能为ST提供括号,引号这类高亮功能,但安装此插件后,默认没有高亮,只有下划线表示,不是很醒目,需要如下配置1. 在ST中用package control安装Br ...