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

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

方法一

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

转载于:https://www.cnblogs.com/songchaoke/p/3476116.html

CSS让图片垂直居中的几种技巧相关推荐

CSS实现背景图片垂直居中定位2种方法
实现背景图片垂直居中定位2种方法第一种方法 background: url("../img/images/login_Bg.png") no-repeat center cent ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...
html整体垂直居中,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方法教程,遵循代码与文章教程懂得驾驭并加以应用. 一.使用flex完成垂直居中操作css flex实现垂直居中.flex兴许不是实现垂直居中最好的抉择,因为IE ...
html怎么水平居中垂直居中,css水平居中和垂直居中的几种解决方案
有时候,为了前端设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法. 一.水平居中1. ...
利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
php图片背景平铺,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
php如何平铺背景图片,css如何让背景图片平铺？css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css 背景平铺控制范围,css如何让背景图片平铺？css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...

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

方法一

方法二

方法三

CSS让图片垂直居中的几种技巧相关推荐

最新文章

热门文章