一、水平居中

  1.文字圖片水平居中：給父級元素設定text-align:center;

  2.確定寬度的塊級元素居中：margin:0 auto;(margin-left,margin-right=0)

  3.不確定寬度的塊級元素的居中:

      （1）用table幫助實現不確定寬度塊級元素居中

                  <table><tr><td>塊級元素</td></tr></table>

                  設定table元素margin:0 auto;

      （2）設定父級元素text-align:center;然後自身display:inline;

      （3）父元素設定float:left;position:relative;left:50%;自身設定position:relative;left:-50%;

二、豎直居中

  1.父級元素高度確定的單行文字:

  2.父元素高度不確定的文字、圖片、塊級元素的垂直居中：給父級元素設定相同的padding（padding-top=padding-bottom)；

  3.父元素高度確定的多行文字、圖片、塊級元素的豎直居中:

  （1）vertical-align屬性只有在父元素為td、th時才生效，其它元素預設不支援vertical-align；在firefox和IE8下可以設定display:table-cell，來啟用                  vertical-align屬性，當時IE6、7不支援display:table-cell，所以我們用最原始的笨辦法，直接使用表格

          <table><tr><td>元素</td></tr></table>   td預設設定了vertical-align:middle;

（2）firefox和IE8用vertical-align:middle;display:table-cell;在IE6、7中用hack；

        .wrap{width:500px;height:200px;display:table-cell;vertical-align:middle;*position:relative;}
        .verticalWrap{*position:absolute;*top:50%;}
        .vertical{*position:relative;*top:-50%;}