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

HTML を使用してボックスを中央に配置する方法

HTML の CSS スタイルシートを使用すると、ボックスを中央に配置するのが簡単です。ボックスの中央揃えを実現するには、主に 2 つの方法があります:

水平方向の中央揃え

1. 設定text-align: center; スタイル: これは次のとおりです。 div、h1、p などのブロックレベル要素を水平方向に中央揃えする最も簡単な方法。
2. Use margin: auto; style: この方法は、画像や埋め込みビデオなどの非ブロックレベルの要素 (インライン要素など) に適しています。要素が中央に配置されるように、要素の左右のマージンが自動的に設定されます。

垂直中央

1. 使用 margin: 0 auto; スタイル: このスタイルは、要素を 0 に配置し、垂直方向の中央に配置します。
2. position:Absolute; スタイルを使用する: このスタイルは、通常のドキュメント フローから要素を削除し、top と left## を使用できるようにします。 # 属性を使用して絶対に配置します。次に、これらのプロパティを 50% に設定し、transform:translate(-50%, -50%); を使用して要素をオフセットして中央に配置します。

例

次の例は、HTML と CSS を使用してボックスを水平方向および垂直方向に中央揃えする方法を示しています。 :

コンテナ要素に、中央に配置された要素を収容するのに十分な高さまたは幅があることを確認してください。

複雑なレイアウトの場合は、水平方向と垂直方向のセンタリング手法を組み合わせて使用​​する必要がある場合があります。

• ブラウザ間の互換性を確保するために、各スタイルで必ずプレフィックスを指定してください (
-webkit-
• 、
-moz-
• など)。

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