中央に立って詳しく説明する.

説明する

 
1、単行テキストの中央:

 
          .center{width:300px;height:300px;line-height:300px;}
2、複数行のテキストの中央:
   1)  

          .c1{width:300px;height:300px; display:table-cell;vertical-align:middle;border:3px solid red;}
          .c2{vertical-alignn:middle;display:inline-block;}
なお、ボックスdivを含むフローティングはできません.複数行のテキストに対して画像の処理方式(inline-block)を採用する.
    2)
       
3、不定サイズの画像の中央:
制御にはbackground-imgを用いる、pixelを1つ用いることができる.gifはフローティングレイヤに配置され、フローティングレイヤをボックスサイズを含むように上書きし、最後にの背景を設定します.
     

         
• 
          
• 
          
• 
     

     ul{list-style:none;}
     li{width:128px;height:128px;border:1px solid #beceeb;float:left;margin-right:10px;}
     li img{
display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;}
4、不定サイズの画像が中央に2:
display:table-cellを使用して実装します.ie 6,7の互換性の問題では、
css hackを使用できます.ie 67のデフォルトの内部には抽象的な文字空間が実現されており、font-sizeを設定することで文字空間のサイズを変更することができる.IEの下のデフォルトの文字空間の高さを広げるためにfont-sizeを大きく設定します.その性質はスペースに似ています.vertical-align:middleプロパティで、画像をこの高い空白スペース空間と垂直に中央に揃えます.ただし、img外ラベルのフローティングはサポートされていないため、img外にdivを追加する必要があります.
         

         
• 
          
         
         

 
          li{margin-right:10px;border:1px solid red;}
          .c1{width:128px;height:128px;display:table-cell;vertical-align:middle;text-align:center;font-size:128*0.873px;}
          .c2{vertical-align:middle;}
5、不定サイズの画像が中央3:
1ピクセルのピクチャを使用するか、spanを使用して高さ100%、幅0にして、ブロックをいっぱいにして垂直に中央に配置し、中央に配置するピクチャを垂直に中央に配置すればいい.
原理の簡単な説明:
一言で、表示する画像を透明な高さ100%、幅1ピクセルの透明な画像vertical-align:middleに揃えます.行内フォーマットの前後では、行内のすべての行内ボックスの高さを含む必要があります.したがって、行内ブロック要素(高さを設定でき、行枠の範囲内に属する)を追加して、行内ボックスの高さを満たし、中央揃えが必要なピクチャにvertical-alignプロパティを設定して、要素を中央に配置することができます.欠点は追加のラベルを追加したことで、互換性が良いことがメリットです.
               

                   
                   
               

6、1つの要素がブロック内の水平垂直中央に揃えられています.
　　

{

     position: absolute;

     top: 0%;

     right: 0%;

     bottom: 0%;

     left: 0%;

     margin: auto;

}

原理は絶対位置決めのボックスモデルを参照することができる
最後に、flexレイアウトのalign-items属性を用いて垂直レイアウトを行う最後の文章を推奨し、拡張することができる.