Web開発でボックスを中央に配置するいくつかの方法

1. ボックスを中央に配置するいくつかの方法を記録します。

1.0、マージン幅固定、高さ中央配置。

2.0、負のマージンを中央揃え。

3.0、絶対位置決めと中央揃え。

4.0、テーブルセルは中央に配置されます。

5.0、フレックス中央配置。

6.0、変換中心;

7.0、幅と高さが不確定で中央に配置（絶対配置パーセンテージ）

8.0、ボタンは中央に配置されます。

2. コードのデモ (html は同じデモを使用します):

html デモ:

<本文>
<div id="コンテナ">
<div id="box"></div>
</div>
</本文>

1.0、マージン固定幅、高さ中央（デモ）

この配置方法は、幅、高さ、余白のみに基づいており、あまり柔軟性がありません。

CS: ...

＃容器 {
幅: 600ピクセル;
高さ: 500px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
幅: 200ピクセル;
高さ: 200px;
マージン: 150px 200px;
背景色: #0ff;
}

2.0、負のマージン中央揃え（デモ）

中央揃えに負のマージンを使用するには、固定された幅と高さを知る必要がありますが、これはかなり制限的です。

CS: ...

＃容器 {
位置: 相対的;
幅: 600ピクセル;
高さ: 500px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
位置: 絶対;
幅: 200ピクセル;
高さ: 200px;
左: 50%;
上位: 50%;
マージン: -100px -100px;
背景色: #0ff;
}

3.0、絶対位置と中央揃え（デモ）

絶対位置を使用して中央に配置するのは非常に一般的な方法です。

CS: ...

＃容器 {
位置: 相対的;
幅: 600ピクセル;
高さ: 500px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
位置: 絶対;
幅: 200ピクセル;
高さ: 200px;
左: 0;
上: 0;
右: 0;
下部: 0;
マージン: 自動;
背景色: #0ff;
}

4.0、表セルの中央揃え（デモ）

垂直方向の中央揃えを制御するには、テーブルセルを使用します。

CS: ...

＃容器 {
表示: テーブルセル;
幅: 600ピクセル;
高さ: 500px;
垂直位置合わせ: 中央;
境界線: 1px実線 #000;
}
＃箱 {
幅: 200ピクセル;
高さ: 200px;
マージン: 0 自動;
背景色: #0ff;
}

5.0、フレックスセンタリング（デモ）

CSS3 で導入された新しいレイアウト方法は使いやすくなりました。デメリット: IE9 以下とは互換性がありません。

CS: ...

＃容器 {
ディスプレイ: -webkit-flex;
ディスプレイ: フレックス;
-webkit-align-items: 中央;
アイテムの位置を中央揃えにします。
中央揃え
コンテンツの中央揃え: 中央;
幅: 600ピクセル;
高さ: 500px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
幅: 200ピクセル;
高さ: 200px;
背景色: #0ff;
}

6.0、変換センター（デモ）

この方法は、CSS の transform 属性を柔軟に使用しており、比較的新しいものです。欠点はIE9と互換性がないことです。

CS: ...

＃容器 {
位置: 相対的;
幅: 600ピクセル;
高さ: 600px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
位置: 相対的;
上位: 50%;
左: 50%;
幅: 200ピクセル;
高さ: 200px;
変換: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: 変換(-50%、-50%);
-moz-transform: translate(-50%, -50%);
背景色: #0ff;
}

7.0、不確定な幅と高さを中央揃え（絶対配置パーセンテージ）（デモ）

幅と高さが不確定なこのタイプのセンタリングは、より柔軟性があります。水平方向の中央揃えを実現するには、左と右のパーセンテージが同じであることを確認し、垂直方向の中央揃えを実現するには、上と下のパーセンテージが同じであることを確認します。

CS: ...

＃容器 {
位置: 相対的;
幅: 600ピクセル;
高さ: 500px;
境界線: 1px実線 #000;
マージン: 自動;
}
＃箱 {
位置: 絶対;
残り: 30%
右: 30%;
上位: 25%
下部: 25%;
背景色: #0ff;
}

8.0、ボタンの中央配置（デモ）

ボタンを外側のコンテナーとして使用すると、内部のブロック要素は自動的に垂直方向に中央揃えされます。効果を得るには、水平方向の中央を制御するだけで済みます。

HTML:

<ボタン>
<div></div>
</ボタン>