//方法一：通用方案，可兼容IE6/7
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
<img src="bigptr.jpg" />
<span></span>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
//方法二：IE6下有效，标准浏览器无效
/*.box{ width:800px;height:600px;border:2px solid #000;position:relative;text-align:center;overflow: hidden;}
.box div{position: absolute;left: 50%;top: 50%;}
img{vertical-align: bottom;position: relative;top: -50%;left: -50%;}
*/
/*
方法三：标准浏览器下有效，不支持IE6/7，该方法非常方便，推荐大家使用
单独设置水平方向的两个偏移量为0时，可实现水平居中
单独设置垂直方向的两个偏移量为0时，可实现垂直居中
*/
.box{width: 800px;height: 600px;text-align: center;border: 2px solid black;position: relative;}
img{vertical-align: bottom;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}
/*
display:table-cell配合text-align:center/vertical-align:top可实现标准浏览器下的水平垂直居中，加上css hack配合方法一可以兼容IE6/7。所以此方法也可作为通用的水平垂直居中方案
*/
/*.box{width: 800px;height: 600px;text-align: center;border: 2px solid black;display: table; *position:relative;overflow: hidden;}
.box div{display: table-cell;vertical-align: middle;*position: absolute;left: 50%;top: 50%;}
img{vertical-align: bottom;*position: relative;left: -50%;top: -50%;}*/
</style>
</head>
<body>
<div class="box">
<div><img src="bigptr.jpg" /></div>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
