body_html/css_WEB-ITnose に対して DIV を水平方向および垂直方向に中央揃えにする方法

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

CSS は DIV を水平方向に中央揃えにします

説明、この記事で参照する DIV には、HTML ページ内のすべての要素が含まれます。

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

うわー

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

CSS は水平方向と垂直方向の中央揃えを実現します

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

<strong>.mydiv</strong>{        margin:0 auto;        width:300px;        height:200px;    }   

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

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

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

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

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

ps: div の幅がページの幅より大きい場合は、body に CSS を追加する必要があります