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

最新推荐文章于 2024-07-12 16:16:27 发布

weixin_34107739

最新推荐文章于 2024-07-12 16:16:27 发布

阅读量131

点赞数

文章标签： python xhtml

原文链接：https://my.oschina.net/hujunil1/blog/77654

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

转载于:https://my.oschina.net/hujunil1/blog/77654