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

方法一

将外部容器的显示模式设置成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. iscroll

    在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...

  2. mysql 添加索引 mysql 创建索引

    1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `table_name` ADD PRIMARY KEY ( `column` ) 2.添加UNIQUE(唯一索引 ...

  3. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  4. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  5. director.js：客户端的路由---简明中文教程

    1.引子 最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...

  6. 从 HTTP 到 HTTPS - IIS 部署免费 HTTPS

    这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇文章与 博客园 和 Segmentfault 共享. 前端开发QQ群:3 ...

  7. 好用的第三方控件,Xcode插件（不断更新）

    第三方控件类:   1.提示框 MBProgressHUD: 是一款非常强大的.提供多种样式的提示框.使用起来简单.方便.可以在GitHub上查看具体的使用方法. https://github.com ...

  8. Java 内部类的阐述

    创建一个Computer抽象类:用来在Test类中创建匿名抽象类 package com.zhiyou; public abstract class Computer { int a = 1; /** ...

  9. popupwindow展示

    样式: layout: popup_appinfo.xml <?xml version="1.0" encoding="utf-8"?> <L ...

  10. IOS开发之Bug--iOS7View被导航栏遮挡问题的解决

    在实际开发中,遇到在UITextView的frame等于当前控制器的View的frame的情况下,然后运行的时候,发现控制器的Frame的高度y值会从导航条的位置64变化到0. 导致UITextVie ...