div垂直居中兼容所有浏览器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>div垂直居中兼容所有浏览器</title>
<style type="text/css">
*{margin:0;padding:0;}

#content{
	width:300px;
	margin:40px auto;
}
#imageContext{
	
	width:300px;
	height:300px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#imageContext p{
	position: static;
	+position:absolute;
	top:50%
}

img{
	position: static; 
	+position:relative;
	top:-50%;
	left:-50%;
}

</style>
</head>
<body>
<h1 style="text-align:center;">下面演示的是一个图片在div中的垂直居中</h1>
<div id="content">
<div id="imageContext">
<p><img src="box.png" /></p>
</div>
</div>

</body>
</html>
div垂直居中兼容所有浏览器_第1张图片 

你可能感兴趣的:(div垂直居中兼容所有浏览器)