CSS / jQuery垂直和水平居中DIV

Question

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

Answer 1

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

注意：水平定心应该是一个没有汗水自己处理。

编辑：我发现了另一个演示

编辑：要使此解决方案在HTML5中工作 ，您需要在CSS中添加html, body { height:100% } （显然<!DOCTYPE HTML>到HTML代码的开头）。

CSS / jQuery垂直和水平居中DIV

问题描述

1 个解决方案

解决方案1
4 2010-04-03 08:22:26

foo.css

foo.html

演示

CSS / jQuery垂直和水平居中DIV

问题描述

1 个解决方案

解决方案1 4 2010-04-03 08:22:26

foo.css

foo.html

演示

解决方案1
4 2010-04-03 08:22:26