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

CSS で div を中央に配置する方法は、[position:absolute;] や [margin:auto;] などの位置を設定することです。ブラウザの互換性を十分に考慮する必要がある場合は、Flex レイアウト方法を使用できます。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

CSS で div を中央揃えに設定するには、次の方法で実現できます。

配置メソッド:position:absolute

子 div に幅と高さが定義されている場合、このメソッドを使用できます。注: margin-top と margin-left の値は、高さと幅の値の半分です。試してみて効果を確認できます。

margin:auto メソッド

これは位置決めメソッドとしても使用できます。このメソッドを使用するには、子 div を幅の値に設定する必要があります。そうでない場合は効果がありません~margin:auto は水平方向と垂直方向の中央に配置されます。水平方向の中央揃えのみを設定する場合は、margin:auto 0 に設定できます。同様に、垂直方向のセンタリングのみを設定する場合は、 margin:0 に設定できます。 auto

display:table-cell メソッド

主にこのメソッドが使用されます複数行のテキストコンテンツの垂直中央揃え用。注: text-align:center はテキストの水平方向の中央揃えを設定し、vertical-align:middle は垂直方向の中央揃えを設定します。

transform:translate(x,y) メソッド

これは css3 の新しい属性です。子要素が幅と高さの値。これを実現するには、このメソッドを使用します。これはアダプティブ ページを作成するときに使用できます。

#疑似要素メソッドの前、後

これにより、子要素も垂直方向に中央揃えになります。それでも水平方向に中央揃えにしたい場合は、子要素に margin: 0 auto を設定するなど、他のいくつかの方法を使用してそれを実現できます。これにより、水平方向と垂直方向の両方で中央揃えになります。

#フレックスレイアウト方式

この方式では、ブラウザの互換性を十分に考慮する必要があります。垂直方向の中央揃えが必要な要素は、幅と高さの値を設定する必要がなく、アダプティブ ページで使用して水平方向と垂直方向の中央揃えを実現できます。

関連ビデオの推奨事項: css ビデオ チュートリアル

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