CSSを中央揃えにする方法

フロントエンド開発では、特にモバイル開発では、中央揃えのレイアウトが一般的な要件であり、スタイルと視覚的な美しさを揃えるために、要素を中央揃えにする必要があります。ここでは、一般的な CSS の中央揃え方法をいくつか紹介します。

1. 水平方向の中央揃えレイアウト

1. margin: 0 auto

これは最も一般的に使用される水平方向の中央揃え方法です。左右のマージンを追加するだけです。要素の auto に設定するだけです。このメソッドはブロック要素に対しては機能しますが、要素が絶対配置またはフローティングされている場合には機能しません。

.box {
  width: 200px;
  margin: 0 auto;
}

2. text-align: center

水平方向に中央揃えにする必要がある要素がインライン要素である場合、text-align: center 属性を使用してその要素を設定できます。親コンテナ テキストを中央に配置するだけです。

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

3. フレキシブル ボックス レイアウト

フレックス レイアウトは、多くのセンタリング効果を簡単に実現できる強力な CSS レイアウト方法です。フレックスボックスを使用すると、子要素を親コンテナの中央に配置できます。

.parent {
  display: flex;
  justify-content: center;
}
.child {
  width: 50px;
}

2. 垂直方向の中央揃えレイアウト

1. line-height

これは最も単純な垂直方向の中央揃え方法であり、要素の行の高さを変更するだけです。高さと同じに設定するだけです。

.box {
  height: 80px;
  line-height: 80px;
}

2. table-cell

display:table 属性と table-cell 属性を使用すると、要素の垂直方向の中央揃え効果を簡単に実現できます。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. フレキシブル ボックス レイアウト

水平方向の中央揃えと同様に、要素の垂直方向の中央揃えもフレックスボックスを使用して実現できます。

.parent {
  display: flex;
  align-items: center;
}
.child {
  height: 50px;
}

3. 水平および垂直センタリング レイアウト

1. 絶対位置決めと負のマージン

絶対位置決めと負のマージンを使用すると、水平および垂直センタリングを簡単に実現できます。要素の。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* height/2 */
  margin-left: -25px; /* width/2 */
  height: 50px;
  width: 50px;
}

2. Transform

Transform を使用すると、要素の水平方向と垂直方向の中央揃えを実現することもできます。要素のtranslateX属性とtranslateY属性を-50%に設定するだけです。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
}

3. Flexbox

Flexbox は、要素の水平方向および垂直方向の中央揃えにも最適です。要素の親コンテナを表示: flex に設定し、justify-content プロパティと align-items プロパティを使用して中央揃えのレイアウトを実現します。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 50px;
  width: 50px;
}

上記は一般的な CSS の中央揃え方法です。実際の開発では、素子の種類や構造、ニーズなどに応じて最適な芯出し方法を選択する必要があります。

以上がCSSを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。