即使有内容要滚动并且用户正在向下滚动页面，我也尝试垂直和水平居中该 div 。以下测试在 IE 中运行良好，但在 Firefox 中，当将鼠标悬停在缩略图上时，我会出现奇怪的闪烁效果。有什么想法吗？
<html>
<head>
<title>aj</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// img preview
$('.img').hover(function() {
if (!$('#overlay').length) {
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
zIndex: 100,
height: $(window).height() + 'px'
}).appendTo('body');
$('<div id="item" />').css({
border: '7px solid #999',
height: '500px',
width: '500px',
top: '50%',
left: '50%',
position: 'absolute',
marginTop: '-250px',
marginLeft: '-250px'
}).append('<img src="' + $(this).attr('rel') + '" alt="img" />').appendTo('#overlay');
}
}, function() {
$('#overlay').remove();
});
});
</script>
</head>
<body>
<img class="img" src="http://ajondeck.net/temp/paperboy_thumb.gif" rel="http://ajondeck.net/temp/paperboy.gif"
alt="image" />
</body>
</html>
最佳答案
foo.css
#container {
display: table;
width: 100%;
height: 100%;
}
#position {
display: table-cell;
width: 100%;
text-align: center;
vertical-align: middle;
}
foo.html
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css">
<!--[if IE]>
<style type="text/css">
#container {
position: relative;
}
#position {
position: absolute; top: 50%;
}
#content {
position: relative;
top: -50%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="position">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>
</body>
</html>
演示
http://www.vdotmedia.com/demo/css-vertically-center.html
注意:水平居中应该不费吹灰之力就能自行处理。
<小时/>编辑:我发现another demo
编辑:要使此解决方案在 HTML5 中运行，您需要添加 html, body { height:100% }到你的CSS(显然<!DOCTYPE HTML>到你的HTML代码的开头)。
关于jquery - CSS/jQuery 垂直和水平居中 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2570232/