1.圖片水平垂直居中

html:
     <div class="parent">
        <div class="child">
           <img src="xxx/demo.png">
        </div>
      </div>
css:
     .parent{
        display: table
     }
     .parent .child {
        display: table-cell;
        *display: inline-block;
        text-align: center;
        vertical-align: middle;
     }
     .parent .child img{
        border: none;
        width: 200px;
        height: 200px;
        vertical-align: middle;
     }
 

註： IE修復: *display: inline-block; 由於vertical-align屬性與表格一起使用，我們將父DIV設置為display: table, 並將子DIV設置為單元格display: talbe-cell.然後我 們可以安全的使用vertical-align：middle 來垂直單元格中的內容.此方法適用於多行文本，容器DIV隨內容動態增長，不幸的是不工作於IE6、IE7中。

2. 絕對定位和垂直拉伸

html:
     <div class="parent">
        <div class="child">content here</
 
div>
     </div>
  css:
      .parent {
         position: relative;
      }
      .parent  .child {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         margin: auto;
         width: 50%;
         height: 50%;
      }

註： 子DIV處於父DIV中，它的頂部，底部，左側，右側的值都設為0。因為子DIV的高度和寬度都設置為小於父DIV的高度和寬度，所以這種定位是不行的。將子DIV的4個邊框都設置為auto會在頂部和底部以及左右兩側產生同等的邊距，這導致子DIV同時水平和垂直居中，不幸的是IE7以下不支持。

3.填充

html:
    <div class="parent">
        <div class="child">content here</div>
    </div>
css:
    .parent {
       padding: 5% 0;
    }
    .parent .child {
       padding: 10% 0;
    }

註: 相同頂部和底部填充用於使子DIV在父DIV居中，並使子DIV中的文本居中。padding設置為"%"，允許兩個DIV動態增長。 如果任何元素的高度都設置絕對測量，則需要一些數學知識來確保頂部和底部填充相同。雖然這個方法是在容器上設置paddings，你可以翻轉事物，並在包含的元素中設置邊距。

4.lineHeight

html:
   <div class="parent">
     <div class="child">content here</div>
   </div>
css:
   .child {
        line-height: 200px;
    }

註: 垂直居中通過給子div（包含文本的那個）一個大於字體大小的行高來實現。有些也設置一個高度等於這個div上的行高，但我還沒有發現它的必要。這將工作於垂直居中一行文本，但不會工作在多行文本。

5.定位和負邊距

html:
    <div class="parent">
        <div class="child"></div>
    </div>
css:
   .parent{ 
       position: relative
    }
    .parent .child { 
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      margin: -100px 0 0 -100px;
     }

註: 子DIV通過定位和邊距定位在父DIV中心，通過將子DIV的頂部和左側的值設為50%，子DIV的左上角位於父DIV的中心。負頂部和左側等於元素高度和寬度的一半，向上拉伸子DIV讓它處於父DIV中心。此方法最適合於塊級元素，並且它需要知道子DIV的維度。

6.浮動分區

html:
   <div class="parent">
       <div class="floater"></div>;
        <div class="child">content here</div>
     </div>
css:
   .parent{
         height: 200px;
      }
      .parent .floater {
         float: left;
         height: 50%;
         width: 100%;
         margin-bootm: -50px;
         border: 1px solid red;
      }
      .parent .child {
        clear: both;
        height: 100px;
        outline: 1px solid yellow;
      }

註: 這裏，一個空的div設置為父div的一半高度並向左（或右）浮動。我們想要居中的div然後被清除，所以它的頂邊將直接位於浮動div的底邊下方。為了使子div的垂直中心向上，我們為浮動div添加一個負的下邊距，它等於子div的一半高度。

轉載自：http://frontenddev.org/article/introduction-to-vertical-in-the-css-in-several-ways.html

css 垂直居中的幾種方法