CSS图片垂直居中方法整理集合

浏览数：50 / 时间：2015年06月09日

原帖链接：http://bbs.blueidea.com/thread-2666987-1-1.html

1、因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>
<div class="miao">
	<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="width:300px;height:80px;">
	<span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="width:500px;height:220px;">
	<span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>
</div>
</body>
</html>

2、display:inline-block 方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
div {
	display:table-cell;
	height:300px;
	width:500px;
	text-align:center;
	border:1px solid #000;
	vertical-align:middle
	}
</style>
<!--[if IE]>
<style type="text/css">
i {
	display:inline-block;
	height:100%;
	vertical-align:middle
	}
img {
	vertical-align:middle
	}
</style>
<![endif]-->
<div>
<i></i>
	<img src="http://www.baidu.com/img/logo.gif" />
</div>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS图片垂直居中方法整理集合