HTML_HTML/Xhtml_Webpage 制作における要素の水平方向および垂直方向のセンタリングに関するディスカッション

ページをデザインするとき、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ページ ウィンドウに対して水平方向および垂直方向に表示する必要があることがよくあります。

これまでに多くの方法が検討されてきました。

HTML:

XML/HTML コードコンテンツをクリップボードにコピー

1. ボディ>
2. div class="maxbox" >
3. div class="minbox align -center">div>
4. div>
5. ボディ>

レンダリング (次のメソッドは同じレンダリングを持ちます):

最初のタイプ: CSS 絶対配置

主に絶対位置決めを使用し、マージンを使用して中間位置に調整します。

親要素:

CSS コードコンテンツをクリップボードにコピーします

1. .maxbox{
2. 位置: 相対;
3. 幅: 500px;
高さ
4. : 500px; マージン
:
5. 5px; ボックスシャドウ: 1px
1px
6. 1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }
7. 子要素:
8. CSS コード
コンテンツをクリップボードにコピーします

.minbox{

幅
1. : 200px
;
2. 高さ: 200px;
ボックスシャドウ:
3. 1px 1px 1px
rgba (0, 0, 0, 0.8)、-
4. 1px -1px 1px rgba(0, 0, 0, 0.8); }

   水平方向と垂直方向の中央揃え:

   CSS コードコンテンツをクリップボードにコピーします

   1. .align-center{
   2. 位置: 絶対;
   3. 左: 50%;
   4. トップ: 50%;
   左マージン
   5. : -100px; /*width/-2* /
   マージントップ
   6. : -100px; /*高さ/-2* / }

   2 番目のタイプ: CSS 絶対配置 Javascript/JQuery

   主に絶対位置を使用し、その後 Javascript/JQuery を使用して中間位置に調整します。この方法は最初の方法に比べてクラスの柔軟性が向上します。 親要素:

   CSS コード

   コンテンツをクリップボードにコピーします

   .maxbox{

   位置
   2. : 相対; 幅
   :
   3. 500px; 高さ:
   500px
   4. ; マージン: 5px
   ;
   5. ボックスシャドウ: 1px 1px
   1px
   6. rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); } 子要素:
   7. CSS コード
   コンテンツをクリップボードにコピーします
   .minbox{
   幅

   :

   200px
   1. ;
   高さ
   2. : 200px; ボックスシャドウ: 1px
   3. 1px 1px rgba (0, 0, 0, 0.8)、-1px
   -
   4. 1px 1px rgba(0, 0, 0, 0.8); } 水平方向と垂直方向の中央揃え: CSS コードコンテンツをクリップボードにコピーします
      1. .align-center{
      2. 位置: 絶対;
      3. 左: 50%;
      4. トップ: 50%; }
      JQuery:

   JavaScript コード

   コンテンツをクリップボードにコピーします

   $(

   1. 関数(){ $(
   ".align-center"
   2. ).css(
   3. "margin-left"
   : ($(
   4. ".align-center").width() /-2)、 "margin-top"
   : ($(
   5. ".align-center").height() /-2) );
   6. });
   9. 3 番目のタイプ: CSS3 絶対位置変位
   絶対配置と CSS3 変換を使用する: 変換でも同じ効果を実現できます。

   親要素:

   CSS コード

   コンテンツをクリップボードにコピーします

   .maxbox{

   1. 位置:
   相対
   2. ; 幅: 500px
   ;
   3. 高さ: 500px;
   4. マージン: 5px; ボックスシャドウ:
   1px
   5. 1px 1px rgba (0, 0, 0, 0.8)、-
   1px
   6. -1px 1px rgba(0, 0, 0, 0.8); } 子要素: CSS コード
   コンテンツをクリップボードにコピーします
   7. 1. .minbox{
      2. 幅: 200px;
      3. 高さ: 200px; ボックスシャドウ:
      1px
      4. 1px 1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }
      6. 水平方向と垂直方向の中央揃え:
      CSS コード

   コンテンツをクリップボードにコピーします

   .align-

   center

   1. { 位置
   :
   2. 絶対; トップ: 50%;
   3. 左: 50%;
   -webkit-transform: 変換(-50%, -50%);
   4. -moz-transform:translate(-50%, -50%); 変換:translate(-50%, -50%);
   /*左と上にシフト*/
   6. }
   8. 4 番目のタイプ: フレックスボックス: [伸縮式レイアウト ボックス モデル]
   Flexbox モデルを使用すると、要素を水平および垂直にするのが非常に簡単です。
   9. ここで HTML を変更する必要があります:

   XML/HTML コード

   コンテンツをクリップボードにコピー

   div class

   =

   1. "maxbox align-center" > div class
   =
   2. "minbox" >div> div>
   3. 親要素:
   CSS コード
   4. コンテンツをクリップボードにコピーします
   1. .maxbox{
   2. 位置: 相対;
   3. 幅: 500px;
   高さ
   4. : 500px; マージン
   :
   5. 5px; ボックスシャドウ: 1px
   1px
   6. 1px rgba (0, 0, 0, 0.8)、-1px -1px 1px rgba(0, 0, 0, 0.8); }
   7. 子要素:
   8. C# コード
   コンテンツをクリップボードにコピーします

   .minbox{

   幅: 200px;

   1. 高さ: 200px; ボックスシャドウ: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
   }
   3. 水平方向と垂直方向の中央揃え:
   4. CSS コード
   コンテンツをクリップボードにコピーします

   .align-

   center

   {

   表示
   1. : display
   : -webkit-flex;
   2. -
   コンテンツ
   3. : 中央; > 項目の配置: 中心
   4. ; } いくつかの方法の比較: 最初の CSS 絶対位置マージン調整は互換性は良いですが、柔軟性に欠けます。水平方向と垂直方向の中央に配置する必要があるボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。 2 番目はスクリプト言語を使用しており、互換性が高く、1 番目の欠点を補っています。水平方向と垂直方向のセンタリングの効果は、幅と高さの変更には影響されません。 3 番目のタイプは CSS3 のいくつかの新しいプロパティを使用し、IE10、Chrome、Firefox、Opera と互換性があります。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。 Firefox、Opera、Chrome と互換性のある Flexbox モデルを使用すると、IE は完全に排除されます。また、幅と高さの変化による水平方向と垂直方向のセンタリング効果には影響しません。
   以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。