css - 绝对中心的Jquerymobile div

Question

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

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

因为它不会使我的元素居中。还尝试了 margin:auto 但它没有用。有什么办法吗？

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 (both) 。然后你可以这样做：

#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();

演示

注意：它将在每次加载时使元素居中，而不是在屏幕更改时（而且我认为您的屏幕尺寸不会改变。）

Answer 3

使用 javascript 并像使用 jquery 一样动态定位 div，例如：

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

编辑

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

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

对 $(window).width(); 做同样的事情