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 を中央に配置するには、次の手順を実行します。

1. 親要素で Flexbox を有効にします。 Set display: flex## for the child element contains the div ＃。

   <code class="css">.container {
     display: flex;
   }</code>

div を Flex アイテムとして設定します:
2. flex 属性を div に設定して、親の Flex アイテムになるようにします。要素。

   <code class="css">div {
     flex: 1;
   }</code>

垂直方向の中央揃え:
3. align-items 属性を使用して、div を垂直方向の中央揃えにします。

   <code class="css">.container {
     align-items: center;
   }</code>

水平方向の中央揃え:
4. justify-content 属性を使用して、div を水平方向に中央揃えにします。

   <code class="css">.container {
     justify-content: center;
   }</code>

例:

<code class="html"><div class="container">
  <div>这是居中的内容</div>
</div></code>

rree

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