CSSでdivを中央揃えにする方法

CSS で Div を中央に配置する方法

Web デザインでは、ページに見栄えの良い効果を与えることが非常に重要です。 Web ページをデザインする場合、Div を中央揃えにするのは一般的な要件ですが、今回は CSS を使用して Div を中央揃えにする方法を紹介します。

方法 1: 位置属性と変換属性を使用する

位置属性は要素の配置方法を指定するために使用され、変換属性は要素の変換に使用されます。

まず、中央に配置する必要がある Div の CSS で固定の幅と高さを設定し、次にその位置属性を絶対に設定し、左と上の両方の属性を 50% に設定してから、変換を使用します。属性 Div をその幅と高さの半分だけ左上に移動します。

.center-div { position: absolute; width: 300px; height: 150px; left: 50%; top: 50%; transform: translate(-50%, -50%); }

これにより、Div が親コンテナ内で水平方向と垂直方向の中央に配置されます。

方法 2: フレックス レイアウトを使用する

フレックス レイアウトは、CSS3 で導入された新しいレイアウト方法であり、要素を水平方向と垂直方向の両方で中央揃えするために使用できます。

まず、親コンテナの表示属性を flex に設定し、次に justify-content 属性を center に設定して、コンテンツを水平方向に中央揃えにします。次に、align-items 属性を center に設定して、コンテンツを中央に配置します。コンテンツを縦方向に表示します。

.parent { display: flex; justify-content: center; align-items: center; } .parent .center-div { width: 300px; height: 150px; }

方法 3: text-align 属性とvertical-align 属性を使用する

内部にテキストが 1 行しかない状況に適用されます。

Div を中央揃えにするには、親コンテナの text-align 属性を使用して内部テキストを水平方向に中央揃えにし、vertical-align 属性を使用してテキストを垂直方向に中央揃えにします。

.parent { text-align: center; line-height: 150px; } .parent .center-div { display: inline-block; vertical-align: middle; width: 300px; height: 150px; }

要約:

要素の中央揃えを実現する上記の 3 つの方法では、まず親コンテナにいくつかの属性を設定し、次に子要素にいくつかの制限を課します。 CSSは非常に柔軟性が高く、自由にWebデザインを行うためには使いこなす必要があります。

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