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 (両方) であるとします。次に、これを行うことができます：

#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

たとえば、jquery の場合と同様に、javascript を使用して div を動的に配置します。

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

編集

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

そのようなものを使用して問題なく動作しますが、コードをチェックしていない可能性があります。私はそれを行うための最良の方法だと思います。

$(window).width(); で同じことを行います。