真ん中にどれだけの方法があるのか

前言
中央はウェブレイアウトの中で非常によく見られるレイアウトと言えるが、垂直中央、水平中央で、その中にブロックレベルの要素と行内の要素があり、システムの整理がないと本当にはっきりしない.いろいろな中央に何種類あるか見てみましょう.
水平方向中央
行の要素を水平方向に中央に配置
行のエレメントが水平方向に中央に配置される最も一般的なシーンは、テキストの中央に配置され、親エレメントにtext-align:centerを設定するのが最も一般的です.この方法は、いくつかのエレメントに有効です.

display:inline

display:inline-block、

display:inline-table

display:inline-flex

  

         のブログ
  

.parent{
      text-align:center;
  }

ブロックレベル要素の水平方向中央
1.行の要素を中央にする
行内要素の中央を見ると、ブロックレベル要素を手動で行内要素に設定し、text-align:center中央を使用することができます.

.parent {
  text-align: center;
}
.child {
  display: inline;
  background-color: red;
  color: white;
}

もちろん、要素の幅を広く設定する必要がある場合はdisplay:inline-blockを設定すればよい
2.左右margin:autoを使用
ブロック要素の左右のmarginをautoに設定することで、左右のmarginを残りの空間を平らに分けることができ、得られる効果は自然に要素が水平に中央に位置しているが、ブロック要素が幅を設定する必要があることを前提としている.

>

.child {
  width: 100px;
  height: 50px;
  margin: 0 auto;
  background-color: blue;
}

コンソールでレイアウトを表示すると、青色要素の左右が等幅のmarginで占められていることがわかります.
この方法は、marginがいっぱいで他の要素を追加できないため、要素が1行を独占する場合に適しています.
3.table+marginの使用
ブロックレベル要素の幅は、手動でwidthを設定するほか、display: tableを設定することによってもよい.この場合、要素の幅はコンテンツの幅なので、ブロック要素の内部にはコンテンツが必要です.そうしないと、崩れてしまいます.同じ行全体を占める.

    
>

.child {
  display: table;
  margin: 0 auto;
  background-color: blue;
  color: white;
}

4.absolute+transformを使う
親要素を相対位置に設定し、子要素に絶対位置を使用して親要素の幅の一般を右に移動し、子要素の幅の一般を左に移動します.

.parent {
  position: relative;
}
.child {
  background-color: blue;
  color: white;
  left: 50%; // left                 
  transform: translateX(-50%); //translateX             
  position: absolute;
}

このように設定された要素は、通常のドキュメントフローから離れており、他の要素のレイアウトには影響しません.ただし、transformプロパティの設定はサポートされていないブラウザは比較的少ない.
5.flex+justify-contentの使用
これも私が最も多く使用している中央方式で、flexレイアウト方式を使用することで簡単に水平中央を実現することができ、justify-content: center;を設定するとサブ要素の水平中央配置を実現することができ、justify-contentは弾性箱要素の主軸(デフォルトの横軸)方向の位置合わせを設定するために使用されます.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
}

サブ要素の幅を設定していないことがわかり、flexレイアウトの下でdiv幅が自動的にコンテンツ幅に縮小し、効果はdisplay: tableを使用するのと同じであり、この場合もmargin:0 autoを設定することで中央に位置することができますが、これは明らかにflexレイアウトを使用する目的ではありません.flexレイアウト要素を使用すると、通常のドキュメントフローから離れる必要がなく、1行を独占する必要がありません.もちろん、一部のブラウザが互換性がないことは避けられません.
6.絶対位置決め要素による自動伸縮
コードは次のとおりです.

.parent {
  position: relative;
}
.child {
  position: absolute; /*    */
  width: 200px;
  height: 100px;
  background: blue;
  margin: 0 auto; /*    */
  left: 0; /*      ，  0*/
  right: 0; /*      ，  0*/
}

複数レベルの要素が水平方向に中央に配置されている
1.flexレイアウトの使用
フレックスレイアウト(flex)を使用すると、マルチブロックレベル要素の水平中央を実現できます.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;//          
}

2.inline-block利用
水平に配列するブロック要素をdisplay:inline-blockに設定し、親要素にtext-align:centerを設定すると、上の行の要素の水平中央と同じ効果が得られます.

.parent {
text-align: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;
    display: inline-block;
}

浮動要素の水平方向中央
1.一定幅の非フローティング要素はrelative+負marginを設定することで、
原理は次の図を参照してください.

.child {
   background-color: blue;
  width: 100px;
  height: 50px;
  position: relative;
  left: 50%;
  margin-left: -50px;
}

注:スタイル設定はフローティング要素自体にあり、親要素は設定する必要はありません.
2.不定幅のフローティング要素は、親子コンテナを介して相対的に中央に配置されます.

.parent {
  float: left;
  position: relative;
  left: 50%;
}
.child {
  background-color: blue;
  width: 100px;
  height: 50px;
  float: left;
  position: relative;
  right: 50%;
}

親要素コンポーネントも位置がずれていることがわかります
3.flexレイアウトの使用
flexレイアウト、強い.ここでは、言うまでもなく、使い方は上と同じです
垂直方向中央揃え
行の要素を垂直方向に中央に配置
1. line-height = height
親エレメントの行の高さを高さに等しくすると、行のエレメントが垂直に中央に配置されます.

  

         のブログ

.parent {
  background-color: red;
  color: white;
  height: 120px;
  line-height: 120px;
}
.child {

}

効果のスクリーンショット:
2.テーブルレイアウトの利用
テーブルレイアウトのvertical-align: middleを使用して、垂直中央を実現することもできます.

.parent {
  background-color: red;
  display: table;
  height: 140px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

ブロックレベル要素垂直方向中央
1.absolute+負margin
既知の高さの場合、top:50%を使用して要素の上部を親要素の高さの半分にし、-marginを使用して要素を自分の高さの半分に上方に変位させることができ、原理は実際には上記の水平の中央にあるのと同じである.

.parent {
  position: relative;
  background-color: antiquewhite;
  height: 200px;
}
.child {
  background-color: beige;
  position: absolute;
  top: 50%;
  height: 100px;
  width: 200px;
  margin-top: -50px;
}

このような考えから,transformを用いて元素を変位させる別の方法が容易に考えられる.原理はそっくりで,単独でリストしない.
2.flex+align-itemsの使用
flexレイアウトを使用して、親要素のalign-itemsを設定することで、サブ要素の垂直中心を実現します.

.parent {
  background-color: antiquewhite;
  height: 200px;//                 
  display: flex;
  align-items: center;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

この方法は行内元素に対しても同様に限られており,を

に変更した.
水平垂直方向中央
1.Flexレイアウト
水平垂直中央は水平中央と垂直中央を組み合わせて使用しますが、最も便利なのはflexレイアウトです.

.parent {
  background-color: antiquewhite;
  height: 200px;//                 
  display: flex;
  align-items: center; //     
   justify-content: center; //     
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

2.margin:auto
コンテナ要素はflexレイアウトまたはgridレイアウトに設定され、サブ要素はmargin:autoと書くだけで、低バージョンのIEブラウザと互換性がありません.

.parent {
  background-color: antiquewhite;
  height: 200px;
  display: grid;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
  margin: auto;
}

flexレイアウトとは異なり、親要素がmarginで満たされていることがわかります.
まとめ
様々な中間案の数は20種類も違わない.実際の開発ではもちろんこんなに多くは使われない.私自身にとって最も多く使われているのはmargin:autoとflexレイアウトだ.こんなに多くの目的知識を研究するには、CSSのいくつかの特性をもっと熟知するために、例えば-margin-leftは要素を左に移動させ、-margin-rightは要素の右側の要素を唯一にする.要素自体が動かない.この特性を研究しないと分からない.また、最も便利なflexレイアウトが古いブラウザをサポートしていないのを見ることができます.互換性には問題がありますが、政府のウェブサイトを構築しない限り、IE 6のような古い骨董品との互換性を考える必要はありません.互換性は過去を矯正する必要はありません.これは自分が気持ち悪いだけです.
参考記事

1つの要素を中心に配置する方法(最終版)(一部の画像はこれより抜粋)

Can I use

Flexレイアウトチュートリアル--チェン一峰

1つの要素を中心に配置する方法(通常、絶対位置、フローティング要素)

この15種類のCSSの中央に位置する方式、あなたはすべてどれらの種類を使ったことがありますか?