CSSボックスをセンタリングする6つの方法！

みなさん、こんにちは。私は「新人」です。今日は、CSS ボックスをセンタリングするいくつかの方法を紹介します。 

1.フレックスレイアウトは中央に配置されます

一般的な方法の 1 つは、flexレイアウト設定を使用して中央に配置することです。

エラスティック レイアウト ( flex) を使用して水平方向のセンタリングを実現します。 をjustify-content使用して、エラスティック ボックス要素の主軸 (水平軸) 方向の配置を設定します。

コンテナを次のように設定します。

• display: flex;親要素に記述され、これは柔軟なコンテナーを定義します

• justify-content 主軸の配置、デフォルトは横軸です

• align-items縦軸の配置、デフォルトは縦軸です

利点: シンプル、便利、高速、3 行のコード。

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
}
.one {
  background: red;
}  
</style>

<div class="box">
  <div class="one">水平垂直居中</div>
</div>

実行後:

 2. サブ項目のフレックス設定

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

実行後:

 3. ポジショニング: 息子と父親

Son and Fatherの方法を使用して、水平および垂直のセンタリングを実現します。親要素の設定position: relative。子要素の設定 position: absolute;  left: 50%;  top: 50%; transfrom: translate(-50%, -50%)

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

実行後:

 4. table-cell は垂直方向のセンタリングを実現します

css に新しく追加された table 属性により、通常の要素をテーブル要素の現実的な効果に変えることができます.この機能により、水平および垂直のセンタリングも実現できます.

そして、表セルのコンテンツは自然に垂直方向に中央揃えになります。水平方向の中央属性を追加するだけです

• table-cell を使用して、垂直方向のセンタリングとコンテナの設定を実現しますdisplay: table-cell;。

• vertical-align: middle要素の垂直方向の配置を設定するプロパティ

• 子要素がブロック レベルの要素である場合は、左と右を使用してmargin:auto水平方向のセンタリングを実現します。インライン要素の場合はコンテナを設定text-align: center

ブロックレベル要素内のインライン要素の水平方向のセンタリングは、 で実現text-align: centerできます。inlineこのメソッドは、インライン要素、インライン ブロックinline-block、インライン テーブルinline-table、およびinline-flex要素の水平方向のセンタリングに有効です。

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

実行後:

 

5.コンテナに疑似要素を追加する

これは、垂直方向のセンタリングを実現する珍しい方法です。

コンテナーに疑似要素を追加しline-height、コンテナーの高さに等しく設定します。子要素を設定しますdisplay: inline-block。

このメソッドは、テキストの水平方向および垂直方向のセンタリングを設定するのに適しています

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

実行後:

6. もう一つ素晴らしい方法があります

この素晴らしい方法は、3番目の使用ポジショニングに似ています。

子要素を設定する必要があるだけです position: absolute; 固定幅と高さを設定します;

top、left、bottom、rightどちらも 0 に設定されています。マージンは自動に設定されています。垂直および水平のセンタリングも実現できます。

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  background: red;
  width: 100px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}  
</style>

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

実行後:

 上記は、一般的に使用される垂直方向のセンタリング方法の一部です。またお会いしましょう!!!