CSSコードを中央揃えにする方法

CSS コードを中央揃えする方法: 1. 位置決めメソッド [position:absolute]; 2. [margin:auto] メソッドを使用; 3. [display:table-cell] メソッドを使用; 4. [transform: translation(x,y)] メソッド。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

Css コードのセンタリング方法:

1. 配置方法:position:absolute

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

#2. Margin:auto メソッド

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

##3.display:table-cell メソッド

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

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

これは css3 の新しい属性です。この方法は、幅と高さの値が設定されていない場合に使用できます。これはアダプティブ ページを作成するときに使用できます。

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

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

#6. フレックスレイアウト方法

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

関連チュートリアルの推奨事項:

CSS ビデオ チュートリアル

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