本文介绍了一种使用CSS和HTML实现居中及定位图片的方法。通过特定的CSS样式设置，可以使图片在页面上水平垂直居中显示，并且保持固定的尺寸比例。
<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://webdesign.chinaitlab.com/UploadFiles_8014/200801/20080117140156958.gif" />
</p>
</div>
<!-- * {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://webdesign.chinaitlab.com/UploadFiles_8014/200801/20080117140156958.gif" />
</p>
</div>
扫一扫
3937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
