javascript - 如何找到屏幕的中心？

Question

我有一个 div，即使在用户滚动页面时，我也需要在屏幕中心（即可视区域）显示这个 div 。

所以它的风格应该是（例如）

{position:fixed; top:90px; left:150 px; z-index:9999; overflow:hidden;}

现在我需要找到 left 和 top 的值，以便 div 将放置在屏幕的中心（即可视区域），对于任何页面。

如何使用 javascript 或 jquery 找到 left & top 的值？

Answer 1

left:50%; top:50%;把你放在中间，然后你应用一个固定的宽度和高度，并将 and 设置margin-top为margin-left负的一半widthand height。

Answer 2

为了以固定位置居中，您需要知道元素的高度和宽度。

然后，您只需要将margin-topandmargin-left的负一半置width中height即可。

例如，此类将居中并具有 100pxheight和 200px的元素width。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

更新： 如果您不知道需要在页面加载之前居中的元素的高度和宽度，那么您需要使用 JavaScript 来检测大小。

这是一个如何做到这一点的工作示例 - http://jsfiddle.net/3Ag97/1/

Answer 3

您可以使用 flexbox 模块，尽管它尚未得到广泛支持：http: //jsfiddle.net/b7nrS/。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 4

试试这个：

var $box = $('#box');

var bw = $box.width() / 2;
var bh = $box.height() / 2;

var wh = $(window).height() / 2;
var ww = $(window).width() / 2;

$box.css({'left': ww-bw, "top": wh-bh})

http://jsfiddle.net/mqMwj/

Answer 5

function centerObject(selector) {
var x = $(window).height() - $(selector).height();
var y = $(window).width() - $(selector).width();
$(selector).css("left", y / 2).css("top", x / 2);
};

Answer 6

#divX {
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -50px; 
    background-color: #0000FF;
}