jQuery_jquery に基づく水平方向と垂直方向の中央揃えの div ウィンドウ

1. CSS を通じて水平方向の中央揃えを実現します:

コードをコピーします コードは次のとおりです:

.className{
margin:0 auto;
width:200px;
}

2. CSS と垂直方向の中央揃え
CSS を使用して水平方向の中央揃えと垂直方向の中央揃えの div を作成するのは面倒なことです。

というように、他の div のサイズを事前に知っておく必要があります。 コードをコピーします コードは次のとおりです。

.className{
width:300px>height:200px;
position :absolute;
left:50%;
margin:-100px 0 0 -150px;



3. jQuery によるセンタリングと垂直センタリングについては前述しました。css メソッドは固定サイズの div にのみ適用されるため、jQuery が機能します。

コードをコピーします>

コードは次のとおりです: $(window).resize(function(){ $('.className').css({ 位置 :'absolute'、

左: ($(window).width() - $('.className').outerWidth())/2、

上: ($(window).height() - $('.className').outerHeight())/2 $(document).scrollTop()
});
//初期化関数
$(ウィンドウ)。 size();


このメソッドの利点は、div の大きさを知る必要がないことですが、欠点は、JavaScript を通じてのみ実現できることです。