CSS を使用して HTML div を中央に配置する

HTML で div を中央に配置するのは、特に水平方向と垂直方向の両方を行う場合に非常に困難です。しかし、この記事では私がお手伝いします!

コード例と説明:

クラス myDiv の div があるとします:

<div class="myDiv">hello dev</div>

それでは、
CSS を使用して水平方向に中央揃え:
この div を水平方向に中央揃えにするには、次の CSS コードを使用します:

.myDiv {
  padding: 0 100%;
}

この CSS コードのパディング: 0 100%; X 軸のパディングを 100% (全画面幅) に設定して、div を水平方向に中央揃えにします。

CSS を使用して垂直方向に中央揃え:
この div を垂直方向の中央に配置するには、次の CSS コードを使用します:

.myDiv {
  padding: 100% 0;
}

この CSS コードのパディング: 100% 0; Y 軸のパディングを 100% (全画面の高さ) に設定して、div を垂直方向の中央に配置します。

CSS を使用して水平方向と垂直方向の中央揃え:
次に、CSS を使用して垂直方向と水平方向の両方で中央揃えにしましょう。
このコードを使用しましょう:

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

このコードでは次のように表示されます: flex;表示モードをフレックスボックスに設定します。これは、これが機能するために重要です。次に、justify-content: center;コンテンツを中央に揃えて配置し、align-items: center;項目を中央に揃えます。これらは連携して div を水平方向に中央揃えします。最後にパディング: 100% 0; Y 軸 (全画面の高さ) に 100% のパディングを追加して、前と同様に div を垂直方向の中央に配置します。すべてをまとめると、div が垂直方向と水平方向に中央に配置されます。

これは CSS を使用して div をセンタリングすることについてでした。詳細はこちらをご覧ください

TailwindCSS の使用:

はい、TailwindCSS を使用するように言わずにこの記事を終えることはできません。初心者の私にとても役立ったので、お気に入りのフレームワークです。

TailwindCSS を使用して div を中央に配置しましょう。
水平方向:
TailwindCSS を使用して div を水平方向に中央揃えにするには、次のコードを使用します。

<div class="flex items-center">hello dev</div>

このコードでは、TailwindCSS クラス flex が表示を flexbox に設定し、items-center によって項目が水平方向に中央揃えに配置されます。

縦方向:
TailwindCSS を使用して div を垂直方向の中央に配置するには、次のコードを使用します。

<div class="h-screen flex items-center">hello dev</div>

このコードでは、TailwindCSS クラス h-screen が全画面の高さを使用して div を作成し、クラス flex が表示をフレックスボックスに設定し、items-center が項目を中央に配置します。

垂直方向と水平方向:

<div class="h-screen flex items-center justify-center">hello dev</div>

このコードでは、クラス h-screen は全画面の高さを使用して div を作成し、クラス flex は表示をフレックスボックスに設定し、items-center は項目を中央揃えにし、justify-center は項目を中央に揃えます。すべてをまとめると、div が垂直方向と水平方向の両方で中央揃えになります。

TailwindCSS を使用して div をセンタリングする方法は以上です。詳細はこちらをご覧ください

結論：

div を中央に配置すると、Web サイト内の要素が目立つようになります。これが、HTML div を中央に配置する方法です。

プロパティの暗記に頼りきらず、必ず練習してください。良い一日をお過ごしください:)

こんにちは、私は学生で、プログラミングが大好きです。私の記事があなたのお役に立ち、寄付をしていただけるのであれば、それが私の教育をサポートし、私の目標を達成するのに役立つので、ありがとうございます! Nabir14 を寄付してください

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