高寬不定圖片水平垂直居中

圖片水平垂直居中的兩個經常使用方法：

一、Table-cell。

　　IE8+及標準瀏覽器利用display:table-cell讓容器以表格元素的方式呈現，配合vertical-align和text-align實現內部圖片水平垂直居中。

　　IE67不支持display：table-cell,可用font-size，值爲容器高的0.875倍，配合圖片自己的vertical-align實現垂直居中。　　

    html,body,p, div { margin: 0; padding: 0; }
    .wrap { height: 300px; width: 300px; border: 1px solid #ccc; }
    .wrap {
        display: table-cell;     /* IE8+及標準瀏覽器識別，讓div以表格元素的方式呈現，目的在於配合vertical-align*/
        vertical-align: middle; /* IE8+及標準瀏覽器識別，內容垂直居中 */
        text-align: center;     /* 內容水平居中 */
        *display: block;        /* IE67識別，保證父級容器爲塊元素 */
        *font-size: 262px;        /* IE67hack，以font-size的方式來實現vertical-align的效果值爲父高的0.875倍 */
        *font-family: Arail;    /* 防止非UTF-8編碼形成hack失效 */
    }
    .wrap img {vertical-align: middle;} /* IE67識別，圖片矯正垂直,配合font-size  */

    <div class="wrap">
        <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" />
    </div>

　　這個方法的缺點很明顯，依賴於table-cell,因爲table-cell須要在文檔流內才能發揮效用，若父容器(wrap)須要position:absolute或者float，則此方法失效。

 

二、button嵌套

　 button自己的內容是自動水平垂直居中的，此點上無兼容性問題，讓button包含圖片，圖片不須要任何特殊處理便可水平垂直居中，算是皆大歡喜，記得button要禁用。

    html,body,p, div { margin: 0; padding: 0; }
    .wrap button {
        height: 300px;
        width: 300px;
        border: 1px solid #ccc; 
        background: none; 
    }

    <div class="wrap">
        <button disabled="true">
            <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" />
        </button>
    </div>

 　　這個方法比第一個方法代碼更簡潔，兼容性更好，html結構上多了一層標籤，若是隻是做爲CSS呈現，算是比較好的方法。

　　 可是在IE下，因爲image包含在了button當中，用戶能觸發交互的只有button，不能直接由用戶觸發綁定在image上的事件，解決的辦法，讓button去處理image上的句柄。標準瀏覽器沒有這個問題。