代码之家 › 专栏 › 技术社区 › aherrick

CSS/jQuery垂直和水平中心DIV

html css jquery

aherrick · 技术社区 · 14 年前

我试图垂直和水平地将这个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 回复 | 直到 14 年前

Swiss Mister 10 年前

傅。css

#container {
  display: table;
  width: 100%;
  height: 100%;
}
#position {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前