divセンタリング用のCSSコード

text-align: center を使用して、HTML で div を水平方向に中央揃えにします。垂直方向の中央揃えの手順は次のとおりです。 div の高さと垂直線の高さを設定します。コンテンツを垂直方向の中央に配置するには、margin: 0 auto を使用します。フレックスボックスまたはグリッド レイアウトを使用して中央揃えを行うこともできます。

Centered divのCSSコード

Centered div

HTMLでは、divはデフォルトでページの左側に水平に配置されるブロックレベルの要素です。中央揃えは CSS プロパティを使用して実現できます。

水平方向の中央揃え

text-align 属性を使用して、div のコンテンツを水平方向に中央揃えにします。 text-align属性可以水平居中div的内容。

<code class="css">div {
  text-align: center;
}</code>

垂直居中

垂直居中div的内容比较复杂，需要使用以下步骤：

1. 设置div的高度和一个垂直线。
2. 使用margin

   <code class="css">div {
     height: 200px;  /* 设置div的高度 */
     line-height: 200px;  /* 设置垂直线的高度 */
     margin: 0 auto;  /* 将内容垂直居中 */
   }</code>

   ログイン後にコピー

垂直中央揃えの div の内容はより複雑で、次の手順が必要です:

1. div の高さと垂直線を設定します。

2. margin 属性を使用して、コンテンツを垂直方向の中央に配置します。

   <code class="css">div {
     display: flex;
     justify-content: center;
     align-items: center;
   }</code>

   ログイン後にコピー
   フレックスボックスを使用して中央に配置します
   フレックスボックスレイアウトを使用して div を中央に配置することもできます。 🎜

   <code class="css">div {
     display: grid;
     place-items: center;
   }</code>

   ログイン後にコピー
   🎜🎜グリッド レイアウトを使用して中央に配置します🎜🎜🎜グリッド レイアウトを使用して div を中央に配置することもできます。 🎜りー

以上がdivセンタリング用のCSSコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。