HTML5でボックスを中央に配置する方法

HTML5 でボックスを中央揃えにするには、次の方法があります: 水平方向の中央揃え: text-align: centermargin: autodisplay: flex; justify-content: center; 垂直方向の中央揃え:vertical-align: middletransform: translation(- 50% , -50%); 位置: 絶対; 上: 50%; 左: 50%; 変換: 変換(-50%, -50%);

HTML5 でボックスを中央揃えにする方法

HTML5 では、ボックスを水平方向および垂直方向に中央揃えする方法がいくつかあります。

水平方向の中央揃え

• text-align: center: このプロパティは、ボックス内のテキストを水平方向に中央揃えにします。ただし、ボックス全体が水平方向に中央に配置されるわけではありません。
• margin: auto: ボックスに幅が設定されている場合、このプロパティはボックスを水平方向の中央に配置します。
• display: flex; justify-content: center;: この CSS の組み合わせは、ボックスを水平方向の flex コンテナーに配置し、水平方向の中央に配置します。

#垂直中心

• vertical-align: middle: この属性はインラインで使用されます要素 (画像など) または表のセル内の垂直方向中央に配置されたコンテンツ。
• transform: translation(-50%, -50%);: このプロパティは、ボックスをその高さと幅の 50% だけ垂直方向と水平方向に移動します。したがって、中央に配置します。絶対的または相対的に配置されたボックスで機能します。
• 位置: 絶対; 上: 50%; 左: 50%; 変換: 変換(-50%, -50%);: この CSS の組み合わせは、絶対配置されたボックスは、垂直方向と水平方向の中央に配置されます。

追加のヒント

• フレックスボックスとグリッド レイアウト: これらの最新のレイアウト システムは、より柔軟なセンタリング オプションを提供します。
• 幅のパーセント: ボックスの幅をコンテナの幅のパーセントに設定し、コンテナと同じ幅にして垂直方向の中央に配置します (コンテナがすでに垂直方向の中央に配置されている場合)。

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