垂直方向と水平方向の中央揃え方法のまとめ

水平方向中央

行内要素

text-align:center;

ブロック要素

1.一定幅のブロック要素を水平方向に中央に配置する

 margin:0 auto;

2.不定幅ブロック要素が水平方向に中央にある
方法1:フローティングのラップ性とパーセンテージ相対位置決めを利用する

<div class='outer'>
   <div class='inner'></div>
</div>

私たちはinner(不定幅)をouterに水平にしたいのですが、innerの外にdivを追加することができます.

<div class='outer'>
   <div class='wrap'>
      <div class='inner'></div>
   </div>
</div>

最初は箱はこうでした
CSSはこう書きます.

.wrap{
   float:left;
   position:absolute;
   left:50%;
}
.inner{
   position:relative;  //   absolute   
   left:-50%;
}

wrapがfloatに設定されているのは、小包を形成し、innerを包むためです.このとき、フローティング要素wrapの幅と高さは内部要素innerが支えており、行全体を占めているわけではありません.すなわちwrapの幅とinnerの幅は等しい.
position:relative設定パーセントは、親要素の幅に対する数パーセントを意味します.このときwrapの左端距離outerの左端はouterである.widthの半分、すなわちwrapの左端はouterの中線にある.
しかし、innerの中線とouterの中線が重なるようにするには、innerが自分の幅の半分を左に移動する必要がありますが、それ自体の幅は分かりません.これは、wrapを追加し、wrapをフローティング(ラップ)する必要がある理由です.「relative設定パーセントは親要素の幅に対する何パーセントを意味するか」というルールに従います.wrapの幅はinnerと等しいため,50%がinnerの幅の50%である.
この方法にも欠点があり,wrapがフローティングしたため,フローティングをクリアすべきである.
方法2:中心にする要素をtableのtdラベルに配置する理由は、tableがブロック要素ではなく、行全体を占めず、その幅は内容によって支えられているため、tableの

margin：0 auto;`

できます.欠点は、意味のないラベルを追加することです.
方法3ブロック要素のプロパティをinlineまたはinline-blockに変更すると、親要素はtext-align:center中央内部要素を使用できます.

垂直方向中央揃え

1行テキスト

親要素のheightとline-heightを等しく設定します.

親要素の高さが決定された複数行のテキスト、ピクチャ、ブロック要素

方法1:垂直に中央に配置する要素をtableのtdに配置し、tdを設定します.

verticle-align:middle;

実はデフォルトはこうです.verticle-alignはinline level,inline-block levelおよびtable-cells要素にのみ適用されます.
方法2:chrome、firefoxおよびIE 8以上のブラウザでブロックレベル要素のdisplayをtable-cellに設定しvertical-alignプロパティをアクティブにすることができますが、IE 6、7はこのスタイルをサポートしていないことに注意してください.table-rowという層を使わずに、直接外層tableを外層することができ、内層table-cellは内層要素の内容を垂直に中央にすることができる.たとえば、次のtoCenterでboxを垂直に中央に配置するには、boxをtable-cellに設定する必要があります.これによりvertical-alignをアクティブにできます.

<div class="box">
  <div class="toCenter">
                     
  </div>
</div>

.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;}
.toCenter{width:100px;height:100px;background: purple;}

欠点:ie 6およびie 7はdisplay:table-cellをサポートしていません.
方法3:中央に位置する要素の高さを決定する1.位置決めの利用

<div class="outer">
   <div class="inner"></div>
</div>

CSSコード:

.outer{ background:#FFCCCC; border:1px solid #000; position:relative; }

.inner{ width:100px; height:100px; background:#CCFF66; position:absolute; top:50%; //         margin-top:-50px; //          }

どうして垂直に中央に位置するのは水平に中央に位置する方法のようにできませんか?

.inner{ position:relative; top:-50%; }

役に立たない???
2.エレメントを中央に配置する前にフローティングブロックを追加し、そのブロックのmargin-bottomを設定します.

<div class="box">
  <div class="floater"></div>
  <div class="toCenter">
                   
  </div>
</div>

.box{width:500px;height:500px;}
.toCenter{width:100px;height:100px;position: relative;clear: both} //    
.floater{height: 50%;float:left;margin-bottom: -50px}//     -          

メソッド4の親要素の上下padding値を同じに設定します.親要素の高さが設定されていない場合、親要素の上下padding値を同じに設定すると、内部のブロック要素が垂直方向に中央に見えるようになります.
方法5

.box{position:relative;}
.toCenter{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; }

メソッド6 boxプロパティの親要素を使用して設定します.

display:box;
box-align:center;  //               

参考資料:未知の幅が水平方向に中央に位置するいくつかの方法CSSは垂直方向に中央に位置する5種類の方法を実現する
資料を見る:CSS元素が垂直に中央に位置する6種類の方法