CSS / jQuery垂直和水平居中DIV

时间：2010-04-03 04:35:22

标签： jquery css html

即使有内容滚动且用户向下滚动页面，我也会尝试垂直和水平居中这个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>

1 个答案:

答案 0 :(得分：4)

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中工作的此解决方案，您需要在CSS中添加html, body { height:100% }（显然<!DOCTYPE HTML>为HTML代码的开头）。