Question

我正在使用jquerymobile，我在div data-role =“content”中有div类allertMessage。我希望这个div位于页面的绝对中心（垂直+水平）。我不能用这个：

position: absolute;
top:50%;
left:50%;

因为它不会使我的元素居中。还试过保证金：汽车，但它没有奏效。有没有办法做到这一点？

Answer 1

你可以这样做：

HTML

<div id="alertdiv">
    <h1>This is an alert</h1>
    <p> And here is the alert content</p>
    <p>And some more content</p>
</div>

CSS

#alertdiv{
    position:absolute;   
    background:orange;
}

JS

$(document).ready(function(){
    var toppos=($(window).height()/2) - ($("#alertdiv").height()/2);
    var leftpos=($(window).width()/2) - ($("#alertdiv").width()/2);
    $("#alertdiv").css("top", toppos).css("left",leftpos);
});

Answer 2

假设你的分区高度和宽度是400px（两者）。然后你可以这样做：

#div{
   position: absolute;
   top: 50%;
   margin-top: -200px;/* half of #div height*/
   left: 50%;
   margin-left: -200px;/* half of #div width*/
}

修改

好的，你也可以通过jQuery绝对中心。

使用这个小脚本居中：

jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft()) + "px"); return this; }

现在，您只需添加以下内容即可居中任何元素：

$(element).center();

DEMO

注意：它会将元素置于每次加载的中心，而不是屏幕更改（我不认为您的屏幕尺寸会发生变化。）

Answer 3

使用javascript并以dquery的形式定位div，例如：

var WindowHeight = $(window).height();

修改

$('#myDiv').css({top: ((WindowHeight - myDivHeight) / 2 ) + "px"});

类似于我使用它并且工作正常，没有检查我的代码可能是一个错字或丢失''或其他东西。我认为这是完成它的最佳方式。

对$（window）.width（）;

执行相同的操作

Jquerymobile div在绝对中心

3 个答案: