css 如何让图片在任意大小的显示器里保持居中

请问下怎么让一张图片在任何大小的和分辨率的浏览器中保持居中效果

背景图片不用是内容图片就是普通的图片怎么让它可以在任意的游览器下获得居中就是上下左右都是在中间页面放大或者是缩小都可以随的页面的变化而改变图片的位置一直保持上下左右居中的效果图片是固定的大小

提问 2013年 12月20日 @ Vladimir 上等兵 (275 威望)

分享到：

1个回答

<!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:350px;
	height:350px;
	vertical-align:middle
	}
p:after {
	content:".";font-size:1px;
	visibility:hidden
	}
-->
</style>

<div><p><img src="YourImage.jpg"/></p></div>

你可以参考下这个代码