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

方法一

将外部容器的显示模式设置成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. webapi 中的本地登录

    WebApi 身份验证方式 asp.net WebApi 中有三种身份验证方式 个人用户账户.用户可以在网站注册,也可以使用 google, facebook 等外部服务登录. 工作和学校账户.使用活 ...

  2. jQuery组件开发之表格隔行选中效果实现

    一.效果展示如下 jQuery组件之表格插件源码 //表格选中插件 //方式一 (function($){ var chosTabBgColor = function(options){ //设置默认 ...

  3. JavaScript闭包理解【关键字：普通函数、闭包、解决获取元素标签索引】

    以前总觉得闭包很抽象,很难理解,所以百度一下"闭包"概览,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的 ...

  4. 2016年4月最佳的20款 jQuery 插件推荐

    这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...

  5. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  6. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

  7. AD RMS 配置指南 附结合SharePoint使用

    本文的 RMS配置 是独立安装的配置手册,如果要和SharePoint结合使用可以作为参考指南. SharePoint安装可参考 点击链接 同样可提供给Office使用,当然Exchange也可以使用 ...

  8. Retrofit 入门学习

    Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...

  9. vim vundle 安装Base16 Vim主题

    1.vim /etc/vimrc set background=dark colorscheme base16-default 2.同样在vimrc中的vundle位置添加 Plugin 'chris ...

  10. RMAN备份失败: ORA-19502 & ORA-27072: File I/O error

    早上检查一ORACLE数据库的RMAN备份的邮件时,发现出现了ORA-27072: File I/O error等错误,具体信息如下所示: channel ORA_DISK_1: starting p ...