CSSで本文のコンテンツを中央に配置する方法-CSSチュートリアル-php.cn

CSS で本文コンテンツを中央揃えにする方法: 1. マージンを使用してマージンを「0 auto」に設定し、HTML ページ内のすべての要素を水平方向に中央揃えにします。 2. div と左端との間の距離を設定します。ページウィンドウの上の境界線。「50%」に設定します。 3. jQuery を使用して、水平方向と垂直方向の中央揃えを実現します。

CSSで本文のコンテンツを中央に配置する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

推奨:css ビデオチュートリアル

ページをデザインするとき、多くの場合、DIV を中央に配置し、ページウィンドウに対して水平および垂直に表示する必要があります。ログインウィンドウを中央に配置します。私たちの従来の解決策は、純粋な CSS を使用して DIV を中央に配置することです。この記事では、CSSとjQueryを使ってDIVを水平方向と垂直方向に中央揃えにする方法を説明します。

CSS は DIV を水平方向に中央に配置します

この記事で参照する DIV には、HTML ページ内のすべての要素が含まれることに注意してください。

DIV を水平方向に中央揃えにするには、CSS を使用して直接行うことができます。 DIV の幅を設定し、マージンを使用してマージンを 0 auto に設定している限り、CSS は自動的に左右のマージンを計算して DIV を中央に配置します。

.mydiv{ margin:0 auto; width:300px; height:200px; }

ログイン後にコピー

しかし、DIV を垂直方向の中央に配置したい場合は、CSS を変更する必要があると思います。

CSS を水平方向と垂直方向の中央揃えにするには、

DIV を水平方向と垂直方向の中央揃えにするには、DIV の幅と高さを知っている必要があり、位置を絶対位置に設定し、ページウィンドウの左端と上端からの距離を 50% に設定します。 50% は、ページウィンドウの幅と高さの 50% を指します。最後に、DIV をそれぞれ左と上に移動します。左と上への移動のサイズは、DIV の幅と高さの半分です。

.mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px }

ログイン後にコピー

この方法はよく使われますが、前提としてDIVの幅と高さを設定する必要があります。ページの DIV の幅と高さが動的である場合、たとえば、DIV レイヤーをポップアップして中央に表示する必要がある場合、DIV のコンテンツは動的であるため、幅と高さも動的です。この場合、 jQuery を使用すると、センタリングの問題を解決できます。

jQuery で水平方向と垂直方向のセンタリングを実現します

jQuery で水平方向と垂直方向のセンタリングを実現する原理は、jQuery を通じて DIV の CSS を設定し、左と上のマージンを取得することです。 DIV のオフセット。シフトとマージンオフセットのアルゴリズムは、ページウィンドウの幅から DIV の幅を減算し、その結果の値を 2 で割った値が左オフセットです。右オフセットのアルゴリズムは次のとおりです。同じ。 DIV の CSS 設定は、resize() メソッド内で完了する必要があることに注意してください。つまり、ウィンドウサイズが変更されるたびに、DIV の CSS 設定が実行される必要があります。コードは次のとおりです。 ## さらに、ページがロードされるときに、resize() を呼び出す必要があります。

$(window).resize(function(){ $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").outerWidth())/2, top: ($(window).height() - $(".mydiv").outerHeight())/2 }); });

ログイン後にコピー

この方法の利点は、DIV の特定の幅と高さを知る必要がないことです。jQuery を直接使用して水平方向と垂直方向の中央揃えを実現でき、さまざまなブラウザーと互換性があります。この方法は、多くのポップアップレイヤーエフェクトで使用されます。

ps: div の幅がページの幅より大きい場合は、本文に css