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

方法一

将外部容器的显示模式设置成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="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="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="images/demo_zl.png" alt="" /></p>

</div>

</body>

</html>

CSS让图片垂直居中的几种技巧 三种方法介绍的更多相关文章

  1. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  2. CSS让图片垂直居中的几种技巧

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

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

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

  4. android系统通过图片绝对路径获取URI的三种方法

    最近做项目要通过图片的绝对路径找到图片的URI,然后删除图片,小小总结一下获取URI的方法,亲自试验在 android 4.1.3的系统上都是可用的. 1.将所有的图片路径取出,遍历比较找到需要的路径 ...

  5. 【读书笔记】iOS-开发技巧-三种收起键盘的方法

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  6. Python｜读、写Excel文件（三种模块三种方式）

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

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

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

  8. css实现图片垂直居中

    1.行高 == 高度:已知图片的高宽 <div style="text-align: center; width: 500px;height:200px; line-height:20 ...

  9. 最近一个刚刚毕业的朋友说，他面试时候，遇到最频繁的css问题就是垂直居中，这里给出几种垂直居中方式！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Index of super-prime - SGU 116（素数+背包）

    题目大意:素数表2,3,5,7,11.....如果一个素数所在的位置还是素数,那么这个素数就是超级素数,比如3在第2位置,那么3就是超级素数.....现在给你一个数,求出来这个数由最少的超级素数的和组 ...

  2. 数据分析：Weka，Matlab，R，SPSS，SAS等分析软件的入门

    1 功能角度 weka是机器学习方面的工具(开源).spss是数学工具(商业工具). 具体的说,weka的主要功能是模式分类,或者模式识别或者回归.包括特征的降维(PCA),特征选择,训练模型以及对测 ...

  3. 【OpenCV入门教程之一】 安装OpenCV：OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅墨 ...

  4. sql server 获取每一个类别中值最大的一条数据

    /* 数据如下: name val memo a 2 a2(a的第二个值) a 1 a1--a的第一个值 a 3 a3:a的第三个值 b 1 b1--b的第一个值 b 3 b3:b的第三个值 b 2 ...

  5. 吐槽一下CSDN的封停审查机制

    今天和一同学用私信交流,我回答中用了"春季zhaopin"这几个字(大家知道是哪两个字),结果提示我内容非法无法发送,我立即改动用了谐音发了过去.结果我出来一看,显示我的个人主页 ...

  6. 使用 maven:archetype 创建JSF2 + EJB3.1 + JPA2项目骨架并在JBoss WildFly 8.1上部署

    运行下面命令创建项目骨架: mvn archetype:generate -DarchetypeGroupId=org.jboss.spec.archetypes -DarchetypeArtifac ...

  7. hdoj 3157 Crazy Circuits 【有下界最小流】

    题目:hdoj 3157 Crazy Circuits 题意:如今要制造一个电路板.电路板上有 n 个电子元件,各个元件之间有单向的电流流向.然后有一个 + .电流进入, -- 电流汇入,然后推断能不 ...

  8. 刚才建立一个 swift 中文讨论社区，欢迎大家參与讨论

    http://www.chinaswift.me 主要目的是收集 swift学习资源

  9. TreeView设置节点图标

    TreeView设置节点图标 没子节点的设置其图标为 0 有节点的设置其图标为 1 procedure TForm1.Button1Click(Sender: TObject);var   i:Int ...

  10. 观察者模式在ng（Angular）中的应用

    在这个前端框架满天飞的天下,angular MVVM 的模式确实火了一把,所以最近一直在学习ng,感悟颇多,填坑无数,今天终静下心来打算更新自己久未变动的博客,做一做总结. 1.在ng中的观察者模式: ...