javascript - jQueryでコンテンツを垂直方向に中央揃え

Question

コンテンツ全体をjQueryで中央に配置しようとしています。投稿された複数のソリューションを試しましたが、利用できませんでした。私の主な問題は、IE6からIE8で動作する必要があることです。

リンクは次のとおりです：http：//christopherburton.net/ie

Answer 1

$(function() {
    var $inner = $('#container');

    $inner.css({ marginTop:  ($(window).height() / 2) - $inner.outerHeight() / 2 });
});

これにより、正しいマージントップ値が一度計算されて設定されます。誰かがブラウザウィンドウのサイズを変更したときにそれを更新したい場合は、オブジェクトのresizeイベントでもそのコードを呼び出す必要があります。window好き

$(function() {
    var $inner = $('#container');
    $(window).on('resize', function() {
        $inner.css({ marginTop:  ($(window).height() / 2) - $inner.outerHeight() / 2 });
    });
});

Answer 2

$( "elem" ).css({
    position: "absolute",
    top: "50%",
    marginTop: "-" + $( "elem" ).height() / 2 + "px"
});

動作するはずです。

Answer 3

そのためにjQueryは必要ありません..

CSSを使用する

これをContainerクラスに使用します

#container {
position: absolute;
width: 525px;
height: 220px;
margin: 0 auto;
left: 35%;
top: 30%;
}