来客轩

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

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
	width:500px;
	height:500px;
	border:1px solid #ccc;
	overflow:hidden;
	position:relative;
	display:table-cell;
	text-align:center;
	vertical-align:middle
	}
div p {
	position:static;
	+position:absolute;
	top:50%
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:276px;
	height:110px
	}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</pre class="html">

<strong>标准浏览器下另类方法:</strong>

<pre class="html">
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
	margin:0;padding:0
	}
div {
	width:500px;
	height:500px;
	line-height:500px;
	border:1px solid #ccc;
	overflow:hidden;
	position:relative;
	text-align:center;
	margin:auto
	}
div p {
	position:static;
	+position:absolute;
	top:50%
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:276px;
	height:110px;
	vertical-align:middle
	}
p:after {
	content:".";font-size:1px;
	visibility:hidden
	}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>

标准浏览器严格型申明下：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
	width:500px;
	height:500px;
	line-height:500px;
	border:1px solid #ccc;
	overflow:hidden;
	position:relative;
	text-align:center;
	}
div p {
	position:static;
	+position:absolute;
	top:50%;
	vertical-align:middle
	}
img {
	position:static;
	+position:relative;
	top:-50%;left:-50%;
	width:276px;
	height:110px;
	vertical-align:middle
	}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

利用字体大小的方法：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
	width:500px;text-align:center;border:1px solid #f00;line-height:500px;
	height:500px;font-size:500px
	}
*>div{
	font-size:12px
	}
div img {
	vertical-align:middle
	}
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div>

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" alt=""/>
</div>

最简单当然是背景图片的方法拉。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
	width:500px;border:1px solid #f00;
	height:500px;
	background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
	}
</style>
<div>
</div>