1 CSS版 利用 display: table-cell; vertical-align: middle;
<!doctype html>
<html>
<head>
<style>
*{padding: 0; margin:0;}
html {background-image: url(about:blank);background-attachment: fixed;}
body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
.wrap{ width: 100px;
height: 100px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.wrap img{
vertical-align: middle; // 这里不写的话,在IE7上会上偏一点
}
</style>
<!--[if lt IE 8]>
.wrap span{
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
}
<![endif]-->
</head>
<body>
<div class="wrap">
<span></span>
<img src="s.png" />
</div>
</body>
</html>
2 JQ版
<script src="http://yygame.duowan.com/Web/Public/Jcode/js/jquery.min.js"></script>
<style>
*{padding: 0; margin:0;}
body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
.wrap{ width: 100px; height: 100px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="wrap">
<img src="s.png" />
</div>
<script>
$.fn.imgMiddle=function (){
return this.each(function(){
var src = $(this).attr('src');
$(this).parent().css('background','url('+src+') no-repeat center');
$(this).css('opacity',0)
})
}
$('.wrap img').imgMiddle();
</script>
3 分页居中
<style>
*{padding: 0; margin:0;}
/* 解决IE6抖动Bug 确实有抖动问题 以下为解决方法*/
html {background-image: url(about:blank);background-attachment: fixed;}
body{font:12px/1.5 tahoma,微软雅黑; height: 2000px;}
.page{
float: left;
position: relative;
left: 50%;
}
.page a{
float: left;
position: relative;
right: 50%;
width: 30px;
height: 30px;
background: green;
color: #000;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<a >1</a>
<a >2</a>
<a >3</a>
<a >4</a>
<a >5</a>
</div>
以上参考张旭鑫,和大漠的有关文章,并尝试。。