图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。
下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。
但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。
（XHTML 1.0 transitional）方法：
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字图片实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:600px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%; text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>
<img src="http://i10.topit.me/l161/1016156445697d1441.jpg" alt="" height="300"/><br />
现在我们要使这段文字垂直左右居中显示！
div#subwrap { position:absolute; border:1px solid #000; top:50%; }
div#content { border:1px solid #000; position:relative; top:-50%; }
</pre></div>
</div>
</div>
</body>
</html>
http://lhdeyx.blog.163.com/blog/static/31819697201301513553678/
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
