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>

查看全部