偶爾會有這樣的需求：在不知道圖片寬和高情況下，需要讓圖片水平和垂直居中在某個容器下，而且，如果圖片寬或者高超出容器，需要按照比例進行縮放，下面介紹幾個常見的方式：

Javascript篇：

用JS的方式處理解決圖片，思路就是預加載圖片，然后取寬和高，計算位置，設置margin值，達到目的

//計算圖片居中位置的信息
functiongetImgSize(img,maxWidth,maxHeight){
 
    varratio,
        picW    = img.width,
        picH    = img.height,
        wRatio  = maxWidth / picW,
        hRatio  = maxHeight / picH;
    if(wRatio < 1 || hRatio < 1){
        ratio   = Math.min(wRatio, hRatio);
        picW    = parseInt(picW * ratio);
        picH    = parseInt(picH * ratio);
    }
 
    sPaddingTop = (maxHeight - picH)/2;
 
    return{
        width : picW,
        height : picH,
        left : (maxWidth - picW)/2,
        top : (maxHeight - picH)/2
    }
}
//預加載圖片
functionloadImg(url){
     
    varimg = document.createElement("img");
    img.onload = function(){
        //調用計算方式
        getImageSize(img,容器寬度,容器高度);
        //塞進頁面
    }
    img.src = url;
}

上面是比較普遍的方式，但就是需要加載完整張圖片才能計算和顯示出來，要是圖片很大，就等死人了

改良方法，圖片寬和高，并不需要加載完畢才能獲取得到，發請圖片請求后，只要服務器響應了，開始下載圖片時候，寬和高就會返回，這個時候就能獲取得到了

functionloadImg(url){
    varimg = document.createElement("img");
    vartimeId = 0;
     
    img.onload = function(){
        //避免重復計算
        if(!timeId){
            //調用計算方式
            getImageSize(img,容器寬度,容器高度);
        }
        clearInterval(timeId);
        timeId = 0;
    }
    //利用計時器，不斷去取圖片的寬度
    timeId = setInterval(function(){
        if(img.width){
            //避免重復計算
            if(!timeId){
                //調用計算方式
                getImageSize(img,容器寬度,容器高度);
            }
            clearInterval(timeId);
            timeId = 0;
        }
    },50);
}

上面方式是利用計時器不斷取圖片的寬度，發現有值就可以停止取了，測試發現，在首次加載圖片情況下，計時器是比onload觸發快很多倍

CSS篇

利用純CSS也能實現圖片的垂直、水平居中

一、傳統方式

主要是利用表格的居中方式，帶*的是為了兼容IE6瀏覽器，如果不考慮，可以去掉

/**容器的css*/
.box {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    *display: block;
    *font-size: 175px; //這個值很奇怪，需要是容器的高度的82.5%，具體數值需要在實際中稍微調整
    *font-family:Arial;
    width:200px;
    height:200px;
}
/**圖片的css*/
.box img {
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}

二、CSS3方式

在移動端可以使用這種方式

img{
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}