CSS垂直中央と水平中央

前言

CSSの中央はずっと1つの比较的に敏感な话题で、后で开発する便利さのため、スレ主は确かに総括する必要があると感じて、総じて言えば、中央の问题は垂直の中央と水平の中央に分けて、実际には水平の中央はとても简単で、しかし垂直の中央の方式と方法は千奇百怪です.

インライン要素の中央揃えスキーム

水平方向中央:

行内要素

text-align:centerを設定します.

Flexレイアウト

display:flexを設定します.justify-content:center;(活用、Chrome、Firefox、IE 9+)

垂直方向中央:

親要素高さ決定の1行テキスト(インライン要素)

height=line-heightを設定します.

親要素高さ決定の複数行テキスト(インライン要素)

a:tableを挿入し(挿入方法は水平中央と同じ)、vertical-align:middleを設定します.

b:display:table-cellを設定してvertical-align:middleを設定します.

ブロックレベル要素の中央揃えスキーム

水平方向中央:

定幅ブロック

左右margin値をautoに設定する.

不定幅ブロック

a:tdに書き込まれたtableラベル(table、tbody、tr、tdを含む完全な)を要素の外に追加し、marginの値をautoに設定する.

b:この要素にdisplay:inlineメソッドを設定する.

c:親要素設定position:relativeとleft:50%、子要素設定position:relativeとleft:50%;

垂直方向中央:

1.position:absolute(fixed)を使用して、left、top、margin-left、margin-topのプロパティを設定します.

.box{
    position:absolute;/* fixed*/
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-200px;
}

2.position:fixed(absolute)プロパティを利用して、margin:autoこれを忘れないでください.

.box{
    position: absolute; fixed
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

3.display:table-cellプロパティを使用してコンテンツを垂直に中央に配置します.

.box{

    display:table-cell;
    
    vertical-align:middle;
    
    text-align:center;
    
    width:120px;
    
    height:120px;
    
    background:purple;

}

4.css 3の新しいプロパティtransform:translate(x,y)プロパティを使用します.

.box{
    position: absolute;
    transform: translate(50%,50%);
    -webkit-transform:translate(50%,50%);
    -moz-transform:translate(50%,50%);
    -ms-transform:translate(50%,50%);
}

5.最高の1つ、使用:before要素;

.box{

    position:fixed;
    
    display:block;
    
    background:rgba(0,0,0,.5);

}

.box:before{
    
    content:'';
    
    display:inline-block;
    
    vertical-align:middle;
    
    height:100%;

}

.box.content{

    width:60px;
    
    height:60px;
    
    line-height:60px;
    
    color:red;
}

6.Flexレイアウト;

.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
        
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
          
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align:center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

締めくくり

スレ主はしばらくこれらの居中方法をマスターして、読者はもしまだ良い方法があるならばあるいはその地方が間違っていると感じて、評論を歓迎して、感謝を惜しまない.
ブログ園ブログCSDNブログ