任意图片实现垂直居中的三种方法(兼容性还不错)

ttx9n · 发表于 2013-9-27 17:13:28

希望图片垂直居中的情况在网站开发过程中会遇到很多，我总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错，感兴趣的朋友可以了解下在网站开发过程中，可能会有希望图片垂直居中的情况，而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。我总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一：
将外部容器的显示模式设置成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 - 未知高度的图片垂直居中</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>

</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=utf-8" />
<title>方法2 - 未知高度的图片垂直居中</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>

</head>
<body>
<div id="box">
<i></i><img src="logo.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 - 未知高度的图片垂直居中</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>

本人测试前两个没问题，第三个好像有问题

醉梦娱乐网 · 发表于 2022-8-13 09:22:37

额头额定法国队是范德萨

u7yxn9 · 发表于 2022-10-13 13:06:23

了乐趣了去了去了去了去了

fiyeid · 发表于 2023-7-31 06:04:47

大家都不容易！

btbhs8t · 发表于 2024-4-27 17:24:01

撒房产税陈飞飞

shw5ovr · 发表于 2024-5-22 10:06:03

逛逛看看瞧瞧

81708585 · 发表于 2024-6-12 17:23:44

iiguuubhuiuihu

gc4hg · 发表于 2024-8-15 22:42:37

我要金豆金豆金豆

q215357618 · 发表于 2024-9-9 15:28:35

天天源码社区。。。。

locopy · 发表于 2024-9-15 09:16:23

搞个免费的用用

账号		自动登录	找回密码
密码			立即注册

[CSS] 任意图片实现垂直居中的三种方法(兼容性还不错)