div を別の div の中央に配置するにはどうすればよいですか?

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃導入＃＃＃

div の中央揃えは、フロントエンド開発の最も重要な側面の 1 つです。この記事では、HTML と CSS を使用して、div を別の div の中に配置するテクニックを見ていきます。

このチュートリアルでは、子 div を持つ必要がある親 div を作成します。私たちのタスクは、子 div を親 div の中央に配置することです。

変換変換と位置構文を使用する

これは、ある div を別の div に中央揃えするあまり一般的な方法ではありません

＃＃＃文法＃＃＃ リーリー

上記の構文は次の操作を実行します -

CSS ルール「left:50%;」は、要素の水平位置をコンテナの左側の 50% に設定します。

ルール「top:50%;」は、要素の垂直位置をコンテナの上部から 50% に設定します。

• ルール「transform:translate(-50%, -50%);」は、要素を水平方向に -50%、垂直方向に -50% 移動させ、要素の中心を左端と上端から効果的に配置します。 50%の位置。

• ただし、これは div を別の div の中央に配置する一般的な方法ではありません。これは次の理由によるものです -

• これには、他の方法よりも多くの 5 行のコードが必要です。

親 div と子 div の位置を定義する必要があるため、将来他の関連する div を設計する際に不便が生じる可能性があります。

• ＃＃＃例＃＃＃ リーリー

  イラスト

• 上記の例では、まず子の位置が絶対的であり、親の位置が相対的であることを宣言します。次に、子を親 div の上と左から 50% 移動します。次に、CSS 変換プロパティを使用して、子 div を中央に配置します。

translate(x, y) 関数はパラメータとして 2 つの値を受け取ります。x は要素を水平に移動するピクセル数、y は要素を垂直に移動するピクセル数です。この例では、要素は幅の -50%、高さの -50% に移動し、垂直方向と水平方向の中央に配置されます。

グリッド プロパティの使用

• div を中央揃えにするより一般的な方法は、CSS の Grid プロパティを使用することですが、この場合は、まず div をグリッドとして宣言する必要があります。

  ＃＃＃文法＃＃＃ リーリー
place-items プロパティは、アイテムをグリッド コンテナーに合わせて水平方向および垂直方向に整列させます。このプロパティはグリッド コンテナーでのみ使用できます。
• ＃＃＃例＃＃＃ リーリー

  フレックスボックスプロパティの使用

使用できるもう 1 つの方法は、CSS の flexbox プロパティです。まず親をフレックスボックスとして宣言する必要があります。フレックス ボックスは CSS で広く使用されている要素です。これらは応答性の高い要素であり、プログラマは通常、Flexbox プロパティを適切に制御できるため、非常に使いやすくなっています。

＃＃＃例＃＃＃ リーリー

複数のネストされた div を中央に配置する

複数のネストされた div を親 div に入れるのも簡単な作業です。親 div であるコンテナと、コンテナの子 div である first-child の 3 つの div があり、2 番目の子は最初の子の子であるとします。次に、説明した方法を使用して、最初の子要素をコンテナ div に中央揃えします。次に、最初の子を 2 番目の子の親にして、同じ手法を適用します。

例として、これらの方法の 1 つを使用してテクニックを説明します。読者は、同様のタスクを実行するために他の 2 つの方法を試してください。

＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃

この記事では、HTML と CSS を使用して、他の div 内で div を中央揃えにする方法を学びました。 div を中央揃えにするための 3 つの異なる手法を検討しました。これらは、position プロパティ、grid プロパティ、および flexbox プロパティを使用します。その中で、flexbox 属性が最も広く使用されており、最も便利です。

以上がdiv を別の div の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。