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

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 的大小和位置 Fixed，如下所示：

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/

并且就像一个固定的元素。