CSS 縦方向 center_html/css_WEB-ITnose

1. 中央に絶対配置を使用します

1 <div class="container">2     <div class="center absolute_center">绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，<br />过度受限指的是同时设置top/bottom与height或者left/right与width。3     </div>4 </div>

絶対対位法原則: 要素が過度に制限されている場合、マージンを自動に設定すると、ブラウザーはマージンの値を再計算します。時間の上下と高さ、または左右と幅。

1 .absolute_center{ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; overflow:auto; resize:both;/*用于设置了所有除overflow为visible的元素*/}

絶対配置を使用するには、要素に明確な高さが必要です。コンテンツが要素の高さを超える場合は、スクロール バーの外観を決定するためにオーバーフローを設定する必要があります。

利点: サイズ変更後も垂直方向の中央に配置できるのはこの方法のみです。

欠点: オーバーフローがサポートされていない場合。明示的に設定すると、要素の高さを超えるとコンテンツがオーバーフローします。 スクロール バーなし

2. 負の marginTop メソッド

要素の高さがわかったら、絶対位置を使用して top を 50% に設定し、merge-top を使用します。コンテンツの高さの半分 (高さ + パディング) / 2 に設定します。コンテンツが要素の高さを超える場合は、スクロール バーの外観を決定するためにオーバーフローを設定する必要があります

原則: 上部: 要素の上部境界の 50%

1 .negative_margin_top{  width:200px; height:200px; position:absolute; top:50%; left:0; right:0; margin:auto; margin-top:-100px; /*-(height+padding)/2*/ }    

利点: コードが少なく、高いブラウザ互換性が ie6 ie7 をサポートします。

欠点: 応答性をサポートしません (パーセンテージ、最小/最大幅は使用できません)

3. 追加要素フローターを使用します

要素の高さがわかっているので、中央要素フローターの外側に追加要素を挿入し、設定しますフローターの高さを 50% に、margin-bottom は中央要素の高さ (高さ + パディング) / 2 の半分になります。コンテンツが要素の高さを超える場合、スクロール バーの外観を決定するためにオーバーフローを設定する必要があります。

原理は方法 2 と似ています。フローターの下境界は、格納ボックスの中心線であり、負の外側下境界により、中心の中心線が格納ボックスの中心線と一致することが保証されます。

1 <div class="container">2     <div class="floater"></div>3     <div class="center floater_center">元素高度已知，在center元素外插入一个额外元素floater，设置floater的height为50%；<br />margin-bottom为center元素高度的一半(height + padding) / 2。内容超过元素高度时需要设置overflow决定滚动条的出现。</div>4 </div>

1 .floater{ height:50%; margin-bottom:-100px;}2 .floater_center{height:200px; width:200px; margin:auto;}

長所: ブラウザーの互換性が高く、古いバージョンの IE と互換性があります

短所: 追加の要素が必要で、応答性がサポートされていません (パーセンテージ、最小/最大幅は使用できません)

4.table-cellメソッド

中央要素の格納ボックスの表示をtable、中央要素の表示をtable-cell、垂直位置揃えをmiddleに設定します。

原則: テーブル レイアウト機能を利用して、vertical-align を middle に設定すると、セル内のコンテンツの中央が行の中央に揃えられます

1 .container2{display:table; height:100%;}2 .table_cell{/*将cell垂直居中，如果外层div不为table则tablecell必须有高度*/display:table-cell;vertical-align:middle;}

利点: あらゆるコンテンツの可変高さをサポートします、応答性をサポートします

欠点: すべて 垂直方向の中央に配置する必要がある要素には、追加のタグを追加する必要があります (テーブルとテーブルセルの 2 つの追加要素が必要です)

5.inline-block メソッド

中央の要素を設定する表示を inline-block に、vertical-align を middle に設定し、包含ボックスの after 疑似要素を設定し、疑似要素の表示を inline-block に設定し、vertical-align を middle に設定し、高さを 100% に設定して開きますコンテナ。

原則: 同じ行のインラインブロック要素にvertical-align: middleを設定すると、行内のインラインブロック要素は要素の垂直中心線に従って整列されます。

<div class="container">    <div class="center inline_block">生命里有着多少的无奈和惋惜,又有着怎样的愁苦和感伤?<br> 雨浸风蚀的落寞与苍楚一定是水,静静地流过青春奋斗的日子和触摸理想的岁月。    </div></div>

1 .container{display:block;}2 /*inline-block的前世今生*/3 .container:after{content: ''; display: inline-block;vertical-align: middle; height: 100%;}4 .inline_block{display:inline-block;vertical-align:middle;}

利点: 応答性をサポート、可変高さをサポート

欠点: 追加のタグが追加されます

6.line-height メソッド

このメソッドは、比較的単純な状況の単一行テキストにのみ適しています。 line-height の設定は要素の高さと同じです。

原則: line-height が font-size より大きい場合、ブラウザはテキストの上端と下端に均等に分割します。

1 <div class="single_line">其实我们每个人的生活都是一个世界，即使最平凡的人也要为他生活的那个世界而奋斗。2 </div>

1 .single_line{height: 30px; font-size: 14px; line-height: 30px; border: 1px solid #518dca;}

長所: シンプルで明確

短所: 単一行のテキストにのみ適しており、制限が大きい

7. 柔軟なボックス レイアウト

柔軟なボックス レイアウトを使用して、単語の主軸と横軸を分離します。配置は中央揃えに設定されます

原則: CSS フレキシブルボックス

1 <div class="container is-Flexbox">2     <div class="center">既要脚踏实地于现实生活，又要不时跳出现实到理想的高台上张望一眼。<br>在精神世界里建立起一套丰满的体系，引领我们不迷失不懈怠。<br>待我们一觉醒来，跌落在现实中的时候，可以毫无怨言地勇敢地承担起生活重担。<br>这是孙少平教给我的道理。 <br>只能永远把艰辛的劳动看做生命的必要，即使没有收获的指望，也心平气静地继续耕种。<br>3 要做到这一点，路还好长。4     </div>5 </div>    

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

利点: 真の垂直方向中央レイアウト

欠点: 柔軟なレイアウトをサポートし始めたのはie11のみです