講解

1，單行文字的居中：

          <div class='center'><span>單行文字框居中</span></div>
          .center{width:300px;height:300px;line-height:300px;}

2,  多行文字的居中：

   1）  

     <div class='c1'><span class='c2'>多行文字框居中。。。。。。。</span></div>
          .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）

        <div style="border: 1px dashed darkcyan;line-height:150px;">
        <span style="display: inline-block;vertical-align: middle;line-height: 1.4;">這是一個測試</br>
             為了測試文字居中</span><i style="width:0;vertical-align: middle;display: inline-block;">&nbsp;</i>
          </div>
 

3,  不定大小圖片的居中：

     可以採用background-img來進行控制，使用一個pixel.gif放在浮動層，並將浮動層覆蓋至包含框大小，最後對<img>進行設定背景。

 <ul>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm1.jpg);'/></li>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm2.jpg);'/></li>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm3.jpg);'/></li>
     </ul>
     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實現。對於ie6，7的相容性問題，可以使用css hack。ie67預設內部實現了一個抽象的文字空間，可以通過設定font-size來改變文字空間的大小。將font-size設定得很大，目的是撐開IE下預設文字空間的高度，其性質類似於空格，然後通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊；但是不支援img外標籤的浮動，所以需要在img外新增一層div。

 <ul>
           <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          </ul>
          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屬性來將元素居中對其。缺點是添加了額外的標籤，好處是相容性好。

               <li style="float: left;border: 1px solid #b3d4fc;width:140px;height:128px;font-size: 0px;text-align: center;">
                     <img style="height:100%;width:0px;vertical-align: middle;" src="img/pixel.gif">
                     <img style="vertical-align: middle;" src="img/mm1.jpg"/>
                 </li>

 6,一個元素在包含塊中的水平垂直居中對齊：

{
     position: absolute;
     top: 0%;
     right: 0%;
     bottom: 0%;
     left: 0%;
     margin: auto;
}

　　原理可參考 絕對定位下的盒模型

最後，在此推薦一篇總結的比較全面的文章，尤其是其提到的最後一種利用flex佈局的align-items屬性進行垂直佈局，可以進行擴充套件。