Question

我有一个div，即使用户滚动页面，我也需要在屏幕中央显示此div （即可查看区域）。

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

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

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

我如何找到左和右的值？顶部有javascript或jquery？

Answer 1

left:50%; top:50%;将您置于中间位置，然后应用固定的宽度和高度，并将margin-top和margin-left设置为width和{{1}的负半部分}}

Answer 2

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

然后您需要margin-top和margin-left到width和height的负半部分才能居中。

E.g。此类将居中且元素具有100px height和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;
}

如何找到屏幕的中心？

6 个答案: