中心のCSS：コンプリートガイド（翻訳）

ここに記事を書くための主な参照CHRIS COYIERある（参照してくださいするにはここをクリック主にCSSレベルについて話しました、）、いくつかの方法が縦方向に各メソッドは、デモを持って後ろに、あなたは、オンラインで結果を表示することができ、中心。

1つのレベル

水平方向のセンターは、インライン要素は、テキスト、画像、リンクなどを持って、インライン要素とブロック要素を持っている;ブロック要素は、主のdiv、pと他のブロック要素です。

1.1 行内元素

インライン要素は、水平方向の中心（使用して達成することができるため、オンラインデモを見ると）：

.blocklist1_1 {    
    text-align: center;
}

この方法は、インライン、インライン、ブロック、インラインテーブルなどに有効です。

1.2要素

ブロック要素のためのこのようなどのマージン左自動マージン右、（提供されてもよいオンラインビューデモ）。

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

かかわらず、ブロック要素の幅が知られているかどうかの、水平中心実現することができます。

1.3複数の要素を

あなたは、水平方向のニーズを中心に複数のブロック要素を持っている場合は、あなたが達成できる2つの方法があります。一つは、インラインブロック、フレックスによる他の手段です。第1の方法は以下のように使用することができるため（オンラインデモ見インラインブロック、親要素の中間レベル：設けブロック要素が表示され、）：

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

フレックスブロックと親要素は、以下のスタイルを（追加する必要がある場合は、オンラインデモを表示します）：

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

縦2

垂直中心はまた、インライン要素とブロック要素に分割されているが、比較が垂直中心状況はここでもう少し議論を必要とし、水平中心、我々は、以下の一つ一つを分析しました。

2.1 行内元素

2.1.1単一ライン

インライン要素の単一の行のために、我々は（に等しいそのパディングトップとパディング・ボトム値を設定する必要がオンラインデモを見ます）：

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

私たちが集合パディングをすることができない場合は、インライン要素（高さ=は50px）の高さが知られている、あなたは、行の高さ=高さを設定することができ、垂直センタリング要素（達成オンラインデモを見ると）：

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

2.1.2マルチライン

複数行の要素のために我々は、垂直方向のセンタリングを達成するための4つの方法があります。

垂直中央値を提供することによって達成されるものに等しくなる、上記（等パディングトップパディング底できるDemo- 1）：

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

垂直-alignプロパティによってBを垂直中心実現することができる（デモ-2 ）：

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

。Cの技術は、単に次のパターン（追加、垂直中心フレックスの手段によって実現することができる。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ブロック要素既知の高さ

ページは時々我々は時々我々が知らない、要素の高さを知っているレイアウト。ブロック要素の既知の高さは、垂直方向の中心（達成するように構成することができるデモ）。

.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ブロック要素の高さは不明

時には我々は、変換時に使用できるブロック要素の高さは、実装されている（知らないデモを）：

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

2.2.3達成フレックスの使用

これら二つのオプションに加えて、あなたも（達成するためにフレックスに使用できるデモを）：

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

タテ3

時には、我々はまた、希望が水平垂直方向に中央揃え中央に配置されていないだけで、上記の例と組み合わせることができるという希望は、達成するために組み合わせて、次の三つの側面に分けられます。

3.1既知の素子の高さ、幅

要素の高さと幅が知られている場合、それは絶対に要素を配置することができる、50センターの％、および（次のように達成マージンの負のオフセット値デモ）。

.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％を付与し、transformプロパティを使用することができ、など（次のデモを）：

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

3.3使用のフレキシボックスを達成します

2つの中央Flexプロパティ（使用する必要性を実装するとデモを）：

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