ブラウザの中央にボックスを表示する方法_html/css_WEB-ITnose

1. CSS を通じて実装

1)

位置: 絶対; 左: 50%; マージン-上:-101px;

2)

うーん

2. JS で実装

position:absolute;     left:0;    top:0;   right:0;   bottom:0;   margin:auto;

説明

通常のドキュメントフローでは、margin: auto; は要素の margin-top と margin-bottom を 0 に設定することを意味します。

1. W3.org:? 'margin-top' または 'margin-bottom' が 'auto' の場合、使用される値は 0.

2. 位置: 絶対値が設定されている要素はブロック要素になり、ブレークされます。通常の文書の流れから離れます。ドキュメントの残りの部分は通常どおりレンダリングされ、要素は元の位置にないように見えます。 Developer.mozilla.org:?…絶対に配置された要素はフローから削除されるため、スペースを占有しません

3. ブロックを上: 0; 下: 0; に設定します。この要素は、ブラウザでその周囲に新しいボックスをラップするため、この相対親要素は body タグであるか、position:relative スタイルのコンテナーで設定されているものになります。 Developer.mozilla.org:?絶対配置要素の場合、top、right、bottom、および left プロパティは、要素を含むブロックの端からのオフセット (要素が相対的に配置される位置) を指定します。

4. 要素を設定します。幅と高さが変更されると、ブラウザーは要素がすべてのスペースを埋めるのを防ぎ、margin: auto; の要件に従って要素を再計算し、新しいボックスで要素を包みます。 Developer.mozilla.org:? [絶対に配置された] 要素のマージンは、これらのオフセットの内側に配置されます。

5. ブロック要素は絶対に配置され、通常のドキュメント フローから分離されているため、ブラウザは次の値に等しい値を設定します。マージントップとマージンボトム。 W3.org:?3 つの [top、bottom、height] のいずれも 'auto' でない場合: 'margin-top' と 'margin-bottom' の両方が 'auto' の場合、この 2 つが一致するという追加の制約の下で方程式を解きます。 margins は等しい値を取得します。別名: ブロックを垂直方向に中央揃えにします

「完全に中央揃え」を使用すると、標準の margin: auto; スタイルのレンダリング規則に意図的に準拠するため、標準と互換性のあるさまざまなブラウザーで動作するはずです。

りー