即使有内容滚动并且用户正在向下滚动页面，我正试图垂直和水平居中该div。以下测试在IE中可以正常工作，但在Firefox中，当将鼠标悬停在缩略图图像上时，会产生奇怪的闪烁效果。有什么想法吗？CSS/jQuery垂直和水平中心DIV

<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>

2010-04-03 aherrick

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，则需要<!DOCTYPE HTML>添加html, body { height:100% }你的CSS（和显然是年初你的HTML代码）。

来源

2010-04-03 08:22:26

@SwissMister，请以评论的形式留下您的修改。 – 2014-03-25 19:01:56

CSS/jQuery垂直和水平中心DIV

回答

foo.css

foo.html

演示

相关问题