CSSの中央揃えを設定する方法

CSSの中央揃えの設定方法: 1. 水平方向の中央揃え [text-align:center]; 2. 水平方向の中央揃え [margin: 0 auto]; 3. 垂直方向の中央揃え [line-height]; 4. テーブルを使用する 、水平および垂直センタリング; 5. 柔軟なレイアウト、水平および垂直センタリング。

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

CSS の中央揃えを設定する方法:

1. text-align:center - 水平方向の中央揃え

テキスト、画像、ボタンなどのみ. インライン要素は水平方向の中央揃え

2 に対して有効です (表示が inline または inline-block に設定されているなど)

2, margin: 0 auto; —— 水平方向の中央揃え

は水平方向のみ中央揃えです。浮動要素の位置決め

.father{ width:500px; height:200px; background-color::#f98769; overflow:hidden;//不可缺少否则margin-top不生效 } .son{ width: 100px; height: 100px; margin:50px auto ; background-color: #ff0000; }

3 には無効です。 line-height - 垂直方向の中央揃え

line-height=height、テキストの 1 行にのみ有効です

4。 table - 水平方向と垂直方向の中央揃え

td/th の align='center' 属性と valign='middle' 属性は、水平方向と垂直方向の中央揃えにできます

5. 柔軟なレイアウト - 水平方向と垂直方向の中央揃え

.father{ display:flex; justity-content:center; align-items:center; } .father{ display:flex; flex-direction:column;//改变主轴为cross axis justity-content:center; }

6. display: table-cell を使用する - 水平方向と垂直方向のセンタリング

テーブルではない要素については、display:table-cell を使用してテーブル セルをシミュレートできます

.father{ height:300px; background:#ccc; display:table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align:middle; /*IE8以上及Chrome、Firefox*/ text-align:center; } .son{ display:inline-block;//或是inline }

7. 奇妙なスキル - 子は父親と同じである必要があります (子要素の幅と高さはわかっています) - 水平方向と垂直方向の中央揃え

.father{ position:relative; } .son{//m、n为子盒子宽、高的一半 position:absolute; left:50%; top:50%; margin-left:-mpx; margin-top:-npx;

8. 幅と高さ不明な子要素の水平方向と垂直方向のセンタリング

.father { position:relative; } .son { position:absolute; top:50%; left:50%: transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/ }

9. 疑似要素のメソッド - 垂直方向のセンタリング

.father{ position: relative; } .father::before{ content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .son{ display: inline-block; vertical-align: middle; }

ログイン後にコピー

推奨される関連チュートリアル: CSS ビデオ チュートリアル ## ####

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