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 サイトの他の関連記事を参照してください。