ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでdivを中央に配置する方法
HTML で div を中央に配置するには 2 つの方法があります。 text-align 属性 (text-align: center) を使用します。単純なレイアウトに適しています。柔軟なレイアウト (Flexbox) を使用する: より柔軟なレイアウト制御を提供します。手順には、親要素で Flexbox (表示: flex) を有効にすることが含まれます。 div を Flex アイテム (flex: 1) として設定します。縦方向と横方向の中央揃えには、align-items プロパティと justify-content プロパティを使用します。
div を中央揃えにする方法
HTML では、CSS プロパティを使用して div を中央揃えにできます。 2 つの方法があります:
方法 1: text-align 属性を使用します
この方法は、より単純なレイアウトに適しています。text-align## を使用します。 # 属性 :
<code class="css">div { text-align: center; }</code>
方法 2: 柔軟なレイアウトを使用する (Flexbox)
Flexbox は、より柔軟なレイアウト制御を提供する CSS レイアウト モジュールです。 Flexbox を使用して div を中央に配置するには、次の手順を実行します。
<code class="css">.container { display: flex; }</code>
<code class="css">div { flex: 1; }</code>
<code class="css">.container { align-items: center; }</code>
<code class="css">.container { justify-content: center; }</code>
<code class="html"><div class="container">
<div>这是居中的内容</div>
</div></code>
rree
以上がHTMLでdivを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。