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