Question

我想在屏幕中央打开一个div（水平和垂直）。

var documnetWidth = $(document).width(),
  documentHeight = $(document).height(),
  widgetFormHeight = widgetForm.height(),
  widgetFormWidth = widgetForm.width();

widgetForm.css({
  top: documentHeight / 2 - widgetFormHeight / 2,
  left: documnetWidth / 2 - widgetFormWidth / 2
});

我的小部件正在水平居中，但是垂直方向需要一些偏移量。

Answer 1

你可以这样做

定义DIV的大小和位置固定，如下所示：

div {
     position: fixed;
     top: 50%; 
     left: 50%; 
     width: 200px; 
     height: 100px; 
     margin: -100px 0 0 -50px;
     z-index: 99;
}

或者，如果您不想将其放置在绝对位置，您可以给它一个宽度，并将其设置为：

div { margin: 0 auto; }

Answer 2

试试这个：

documentHeight = $(window).height(),

而不是：

documentHeight = $(document).height(),

你得到它的方式是你获得的文件高度可能高于或低于浏览器的高度。

然后允许文档当前滚动了多远：

top: documentHeight/2-widgetFormHeight/2 + $(document).scrollTop(),

演示：http://jsfiddle.net/vULHL/

Answer 3

没有宽度或高度的绝对居中的DIV：

http://jsfiddle.net/dFkXq/1/

并且就像固定元素一样。

为什么我的容器没有进入中心

3 个答案: