CSSのセンタリング方法を詳しく解説

CSSのセンタリングはフロントエンドエンジニアがよく直面する問題であり、基本的なスキルの1つでもあります。今日、編集者は CSS 中央揃えのソリューションをまとめて整理しました。現在、水平中央揃え、垂直中央揃え、水平および垂直中央揃えを含む 15 個のソリューションがあります。不足しているものがあれば順次追加していきます。メモ代わりとしてお考えください。

1 水平方向の中央揃え

1.1 インライン要素は水平方向の中央揃えになります

text-align: center を使用して、ブロックレベル要素内のインライン要素の水平方向の中央揃えを実現します。この方法は、インライン要素 (inline)、インライン ブロック (inline-block)、インライン テーブル (inline-table)、および inline-flex 要素の水平方向のセンタリングに有効です。

コアコード:

.center-text {    text-align: center;
 }

1.2 ブロックレベル要素は水平方向に中央揃えになります

固定幅のブロックレベル要素の margin-left と margin-right を auto に設定することで、ブロックレベル要素を水平方向に中央揃えにすることができます。

コアコード:

.center-block {  margin: 0 auto;
}

1.3 複数のブロックレベル要素を水平方向に中央揃え

1.3.1 inline-blockを使用する

2つ以上のブロックレベル要素が連続している場合、ブロックの表示を設定しますレベル要素 inline-block と親コンテナの text-align 属性を入力して、マルチブロックレベル要素を水平方向に中央揃えにします。

コアコード:

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

1.3.2 使用ディスプレイ: flex

伸縮性のあるレイアウト (フレックス) を使用して水平方向のセンタリングを実現します。ここで、justify-content を使用して、主軸 (水平軸) でのフレキシブル ボックス要素の配置を設定します。 ) 方向。この例では、子要素が水平かつ中央に表示されるように設定されています。

コアコード:

.flex-center {    display: flex;    justify-content: center;
}

2 垂直方向の中央揃え

2.1 単一行のインライン (inline-) 要素は、高さ (height) と行の高さ (line-height) を設定することで垂直方向の中央揃えになります

インライン要素が等しいので、要素が垂直方向の中央に配置されます。

コアコード:

#v-box {    height: 120px;    line-height: 120px;
}

2.2 複数行要素の垂直方向の中央揃え

2.2.1 テーブルレイアウト(table)の使用

テーブルレイアウトのvertical-align: middleを使用すると、子要素の垂直方向の中央揃えを実現できます。

コアコード:

.center-table {    display: table;
}.v-cell {    display: table-cell;    vertical-align: middle;
}

2.2.2 フレックス レイアウト (フレックス) の使用

フレックス レイアウトを使用して垂直センタリングを実現します。ここで、flex-direction: 列は主軸の方向を垂直として定義します。フレックス レイアウトは CSS3 で定義されているため、古いブラウザでは互換性の問題が発生します。

コアコード:

.center-flex {    display: flex;    flex-direction: column;    justify-content: center;
}

2.2.3 「ゴースト要素」を使用します

「ゴースト要素」(ゴースト要素) テクノロジーを使用して垂直方向のセンタリングを実現します。つまり、高さ 100% の疑似要素を親コンテナに配置して、テキスト要素と擬似要素 要素は垂直方向の中央揃えを実現するために垂直方向に整列されます。

コアコード:

.ghost-center {    position: relative;
}.ghost-center::before {    content: " ";    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle;
}.ghost-center p {    display: inline-block;    vertical-align: middle;    width: 20rem;
}

2.3 垂直方向に中央揃えのブロックレベル要素

2.3.1 固定高さのブロックレベル要素

中央揃えの要素の高さと幅がわかっているため、垂直方向の中央揃えの問題は非常に簡単です。垂直方向のセンタリングは、要素を上から 50% の絶対位置に配置し、要素の高さの半分を上にオフセットするように margin-top を設定することで実現できます。

コアコード:

.parent {  position: relative;
}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; 
}

2.3.2 高さが不明なブロックレベル要素

垂直方向に中央に配置された要素の高さと幅が不明な場合、CSS3 のtransform属性を使用して、Y軸を逆に50オフセットすることができます。 % 垂直方向のセンタリングを実現します。ただし、一部のブラウザには互換性の問題があります。

コアコード:

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);
}

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

3.1 固定幅と高さの要素は水平方向と垂直方向の中央揃えになります

要素の幅全体の半分をマージンを介して移動させて、要素を水平方向の中央揃えにしますそして縦方向に。

コアコード:

.parent {    position: relative;
}.child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    left: 50%;    margin: -70px 0 0 -170px;
}

3.2 不明な幅と高さの要素が水平方向と垂直方向の中央に配置されます

2D 変換を使用して幅と高さの半分を水平方向と垂直方向の両方向に変換し、要素が水平方向と垂直方向の中央に配置されるようにします。

コアコード:

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

3.3 フレックス レイアウトの使用

フレックス レイアウトの使用。ここで、justify-content を使用して、フレキシブル ボックス要素の主軸 (水平軸) 方向の配置と整列を設定または取得します。 -items 属性は、フレックス コンテナーの現在の行のクロス軸 (垂直軸) 方向におけるフレックス アイテムの配置を定義します。

コアコード:

.parent {    display: flex;    justify-content: center;    align-items: center;
}

3.4 グリッドレイアウトの使用

グリッドを使用して水平および垂直のセンタリングを実現することは互換性が低いため、推奨されません。

コア コード:

.parent {  height: 140px;  display: grid;
}.child { 
  margin: auto;
}

デモ プログラム:

デモ コード

3.5 画面の水平方向と垂直方向の中心合わせ

画面の水平方向と垂直方向の中心合わせは非常に一般的に使用され、通常のログイン ページと登録ページに必要です。互換性を高めるには、テーブル レイアウトも使用する必要があります。

コアコード:

.outer {    display: table;    position: absolute;    height: 100%;    width: 100%;
}.middle {    display: table-cell;    vertical-align: middle;
}.inner {    margin-left: auto;    margin-right: auto; 
    width: 400px;
}

デモプログラム:

デモコード

以上がCSSのセンタリング方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。