中央のcss:完全ガイド

ここで主に参考にしたのはCHRIS COYIERが書いた文章(クリックして見る)で、主にcssの水平、垂直に中央に位置するいくつかの方法について話して、すべての方法の後ろにdemoがあって、オンラインで効果を見ることができます.

1水平

水平方向の中央には行内要素とブロック要素があり、行内要素には文字、ピクチャ、リンクなどがある.ブロック要素は主にdiv、pなどのblock要素である.

1.1行内要素

行内要素については、水平方向の中央(demoをオンラインで表示)を次のように実装できます.

.blocklist1_1 {    
    text-align: center;
}    

この方法はinline,inline-block,inline-tableなどに有効である.

1.2要素

ブロック要素の場合、margin-leftとmargin-right自動を設定できます(demoをオンラインで表示):

.blocklist1_2 .div1 {    
    margin: 0px auto;
}    

ブロック要素の幅が既知であるかどうかにかかわらず、水平方向の中央に配置できます.

1.3複数のブロック要素

複数のブロック要素が水平方向に中央に位置する必要がある場合、2つの方法が実現されます.1つはinline-block、もう1つはflexです.最初の方法では、次の方法(demoをオンラインで表示)を使用して、ブロック要素display:inline-blockを設定し、親要素が水平に中央に位置します.

..blocklist1_3 .div1 {    
    text-align: center;    
}    
.blocklist1_3 .div1 div {    
    display: inline-block;    
}

flexを使用する場合は、ブロックの親要素に次のスタイルを追加する必要があります(demoをオンラインで表示します).

.blocklist1_3 .div2 {    
    display: flex;    
    justify-content: center;    
}    

2垂直

垂直方向の中央にも行内要素とブロック要素がありますが、水平方向の中央に比べて、垂直方向の中央にはここで議論する必要がある場合が多いので、以下で分析します.

2.1ライン内の要素

2.1.1一方通行

単行の行内要素の場合、padding-topとpadding-bottomの値を等しく設定するだけです(demoをオンラインで表示します):

.blocklist2_1_1 .div1 {    
    padding-top: 20px;    
    padding-bottom: 20px;    
}    

paddingを設定できない場合は、内部要素の高さ(height=50 px)が既知の場合、line-height=heightを設定して、要素の垂直中央を実現することができます(オンラインでdemoを表示します):

.blocklist2_1_1 .div2 {    
    line-height: 50px;    
    height: 50px;    
}    

2.1.2複数行

複数行の要素については、垂直方向の中央に4つの方法があります.

a.は、上記のようにpadding-topとpadding-bottomの値を等しく設定することによって垂直中央(demo-1):

.blocklist2_1_2 .div1 {   
    padding: 20px 0px;  
}    

b.vertical-alignプロパティを使用して垂直中央(demo-2)

.blocklist2_1_2 .div2 {   
    display: table;    
}    
.blocklist2_1_2 .div2>div {    
    display: table-cell;    
    vertical-align: middle;    
}    

c.flexテクノロジーを使用して垂直中央を実現できます.以下のスタイル(demo-3)

.blocklist2_1_2 .div3 {    
    display: flex;    
    justify-content: center;   
    flex-direction: column;    
    height: 400px;   
}    

d.全高さの擬似要素をコンテナ内に配置し、テキスト垂直位置合わせ(demo-4)

.blocklist2_1_2 .div4 {    
    position:relative;    
}    
.blocklist2_1_2 .div4::before {    
    content: ' ';    
    display: inline-block;    
    height: 100%;    
    width: 1%;    
    vertical-align: middle;    
}    
.blocklist2_1_2 .div4>div {    
    display: inline-block;    
    vertical-align: middle;    
}    

2.2ブロック要素

2.2.1ブロック要素の高さは既知である

Webレイアウトでは、要素の高さを知っている場合もあれば、知らない場合もあります.既知の高さのブロック要素については、垂直中央(demo)を実現するように設定できます.

.blocklist2_2_1 .div {    
    position: relative;    
}   
.blocklist2_2_1 .div div {    
    position: absoulte;
    top: 50%;    
    height: 100px;
    margin-top: -70px; //  70px height*1/2 + padding    
    padding: 20px;    
}    

2.2.2ブロック要素の高さが不明

ブロック要素の高さを知らない場合がありますが、transformを使用して実現できます.

.blocklist2_2_2 .div {    
    position: relative;    
}    
.blocklist2_2_2 .div div {    
    transform: translateY(-50%);    
    top: 50%;    
    position: absoulte;    
}    

2.2.3 flexによる実現

上記の2つの方法に加えてflex実装(demo)を使用することもできます.

.blocklist2_2_3 .div {    
    display: flex;    
    flex-direction: column;    
    justify-content: center;    
}    

3水平垂直

水平中心だけでなく垂直中心も望んでいる場合があり、上記の例と組み合わせて実現することができます.主に以下の3つの側面に分けられます.

3.1要素の高さ、幅は既知

要素の高さと幅が既知である場合、要素を絶対的に位置決めし、中心を50%オフセットし、次のように負のmargin値を使用して実現できます(demo).

.blocklist3_1 .div {    
    position: relative;    
}    
.blocklist3_1 .div div {    
    position: absoulte;
    top: 50%;    
    left: 50%;    
    margin: -120px 0px 0px -220px;    //height  ，width  ，    padding 
    height: 200px;    
    width: 400px;    
    padding: 20px;    
}    

3.2要素の高さ、幅が不明

要素の高さと幅が不明な場合は、変換プロパティを使用して、次のように50%の負の値を2つの方向に与えることができます(demo).

.blocklist3_2 .div {   
    position: relative;    
}    
.blocklist3_2 .div div {    
    position: absolute;     
    top: 50%;    
    left: 50%;    
    transform: translate(-50%, -50%);    
}    

3.3 flexboxによる実装

flexで実装するには、2つの中心プロパティ(demo)を使用する必要があります.

.blocklist3_3 .div {     
    display: flex;    
    justify-content: center;    
    align-items: center;
}