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

DIV ボックスを画面の中央に配置する方法

方法 1: CSS プロパティを使用します

• #text-align : center; コンテナ要素を中央に配置します。
• margin: auto; コンテナ要素に自動マージンを設定します。これにより、要素がコンテナ内の中央に配置されます。

HTML コード:

<code class="html"><div style="text-align: center; margin: auto;">
  您的内容在此
</div></code>

方法 2: フレックスボックスを使用する

• 表示: flex; コンテナ要素をフレックスボックスに変換します。
• justify-content: center; 要素を主軸 (水平方向) の中央に配置します。
• align-items: center; 要素を交差軸 (垂直方向) の中央に配置します。

HTML コード:

<code class="html"><div style="display: flex; justify-content: center; align-items: center;">
  您的内容在此
</div></code>

方法 3: 絶対位置を使用する

• position :Absolute; 通常のドキュメント フローから要素を削除します。
• left: 50%; 要素を幅の半分だけ左から移動します。
• transform: translation(-50%, -50%); 要素を中心点から幅と高さの半分だけ左上に移動します。

HTML コード:

<code class="html"><div style="position: absolute; left: 50%; transform: translate(-50%, -50%);">
  您的内容在此
</div></code>

追加メモ:

• 場合によっては、マージンを追加することもできます。または、適切なセンタリングを確保するために他のスタイル値を調整する必要があります。
• コンテナ要素がコンテンツを保持するのに十分な大きさであることを確認してください。
• これらのメソッドは、最新のすべてのブラウザで機能します。

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