Web デザインでは、センタリングは非常に一般的なレイアウト方法です。現在、多くの Web デザインではユーザー エクスペリエンスを向上させるために中央レイアウトが使用されており、CSS 中心の実装も非常にシンプルかつ重要です。
フロントエンド開発で CSS コードを使用して中央揃えのレイアウトを実現する方法について説明します。
センタリング CSS コードの学習を始める前に、まずいくつかの基本概念を理解する必要があります。
水平方向の中央揃えレイアウトを実現するには多くの方法がありますが、その本質は、要素の左右の余白を均等にすることです。
これは最も一般的に使用される方法で、親要素がブロックレベルの要素 (たとえば、 div) であり、インライン要素 (テキストなど) のプロパティを設定します。
父元素 {
text-align: center;
}
子元素 {
display: inline-block;
}このメソッドでは、位置合わせを行うために子要素を inline-block に設定する必要があります。そうでない場合は、margin メソッドを使用する必要があります。
この方法も一般的に使用されており、親要素と子要素の両方がブロック レベルの要素である場合に適しています。子要素の幅は固定です。左右のマージンを自動に設定すると、両側のマージンが均等になり、要素が中央に配置されます。
父元素 {
width: 60%;
}
子元素 {
width: 80%;
margin: 0 auto;
}このレイアウト方法では、親要素が幅を設定する必要があることに注意してください。そうしないと、子要素を整列させることができません。
レイアウトでフレックスボックスを使用している場合は、次の CSS コードを使用して要素を水平方向の中央に配置できます。
父元素 {
display: flex;
justify-content: center;
}上記のコードは、子要素を x 軸方向の中央に配置します。
グリッド レイアウトを使用する場合は、次の CSS スタイルを使用して要素を水平に配置できます。以下の概要に示すように、
父元素 {
display: grid;
place-items: center;
}place-items プロパティは、子要素を水平方向と垂直方向の両方に整列させることができます。
垂直方向のセンタリング レイアウトを実装する方法も多数あります。ここではいくつかの方法を紹介します。
これは非常にシンプルで一般的に使用される方法で、単一行のテキストや画像に適しています。親要素と子要素に同じ行の高さの値を設定することで、垂直方向の配置を実現できます。
父元素 {
line-height: 100px;
}
子元素 {
line-height: 100px;
}ここで、親要素の高さは子要素の整数倍でなければならないことに注意してください。
このメソッドは、子要素の位置属性を絶対に設定し、上と下を使用して位置を揃えます。
父元素 {
position: relative;
height: 200px;
}
子元素 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}このメソッドは、コンテナの高さが固定されており、子要素の高さが不明な場合に適しています。
この方法では、コンテナのフレックスボックス レイアウトを使用し、次に align-items と # を使用する必要があります。 ## justify-content プロパティは、子要素を垂直方向と水平方向の中央に配置します。
父元素 {
display: flex;
align-items: center;
justify-content: center;
}父元素 {
display: flex;
align-items: center;
justify-content: center;
}以上がCSSを使って中央揃えレイアウトを実現する方法（コードコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
