前提

圖片大小為：399*367，沒有湊成整數(shù)-_-
html代碼：

<div>
        <img src="time.jpg" alt="嘻嘻哈哈">
</div>

一、脫離文檔流且父元素已知寬高

1、margin:auto法

div {
    width: 600px;
    height: 500px;
    position: relative;
    border: 1px solid #465468;
}

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

父元素的寬和高 應>=圖片的寬和高，且position: relative不能少，圖片設(shè)置絕對定位、上下左右值均為0 ，margin: auto必不可少，效果如下圖：

margin:auto法居中效果圖

margin:auto法圖片盒子模型

2、負margin法

上述例子中其他均不變，img的樣式改為：

 img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -183.5px;            /*height的一半*/
      margin-left: -199.5px;            /*width的一半*/
 }

仍然是絕對定位，但top和left的值均為50%，margin-top的值為圖片height（此處沒有padding）的一半，margin-left的值為圖片width的一半。
顯示效果依然是居中，不貼圖了，瀏覽器中圖片的盒子模型：

負margin法圖片盒子模型

3、變形

div樣式依然不變，img樣式變?yōu)椋?/p>

img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);//瀏覽器廠商前綴必不可少
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

是不是和第二種方法很像？只不過把margin-left和margin-top換成了translate。往左移動自身寬度的50%，往上移動自身高度的50%，其實原理和負margin 法類似。
顯示效果和前面一樣，img盒模型如下：

變形盒模型

二、不脫離文檔流，父元素已知寬高

1、webkit-box法

彈性框模型,真正意義上的流體布局(但是已過時，最好用flex),此法至少需要知道高度，寬度不知道的時候會以body的寬度為寬度，只需設(shè)置div的樣式，img不需要設(shè)置。

 div {
   border: 1px solid #465468;
   width: 500px;
   height: 400px;
   display: -webkit-box;//將此元素及其直系子代加入彈性框模型中
   -webkit-box-pack: center;//設(shè)置沿 box-orient 軸的父元素中子元素的排列方式。
   -webkit-box-align: center;//設(shè)置框的子代在框中的排列方式,如果方向是水平的，該屬性就會決定垂直排列
}

效果和第一張圖一樣，img盒模型只有content一個值：

webkit-box img盒模型

四、不脫離文檔流，父元素寬高已知未知均可

1、table-cell法

div {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     border: 1px solid #465468;
}
img {
     vertical-align: middle;
}

div的寬高就是img的寬高。table-cell的作用：指定對象作為表格單元格，類似html標 簽<td>，也就是說它可以使對象具有表格單元格的屬性。img 的 vertical-align: middle必不可少。如果去掉的話，圖片會上移一點，文字的行高會變。居中顯示效果圖如下：

table-cell 布局

盒子模型和webkit-box法的盒模型一樣，只有一個content值，此處圖省略~

2、flex布局

最時髦方法，但還存在瀏覽器的支持問題：

 div {
     display: flex;
     justify-content: center;//控制水平方向的居中
     align-items: center;//控制垂直方向的居中
     border: 1px solid #465468;
 }

只需給父級元素設(shè)定flex屬性值即可，內(nèi)部img或者文字不需要設(shè)置其他屬性，顯示效果如下：

flex布局

沒有設(shè)置寬度的話自動以body寬度為寬度,圖片的高度為高度，盒模型同table-cell的盒模型。

3、inline-block法

inline-block+after

div {
     text-align: center;
     overflow: auto;
     font-size:0;
 }
div:after,
img {
     display: inline-block;
     vertical-align: middle;
 }
div:after {
     content: '';
     height: 100%;
}
img {
     max-width: 99%; 
}

首先設(shè)置img垂直居中；然后，給偽類設(shè)置display: inline-block，這樣偽類的高度就比較準確了，而不是一開始默認計算的值（div有高度的話和div一樣，沒有的話為0），再設(shè)置vertical-align: middle，讓偽類的內(nèi)容也垂直居中，歐了。

最后比較重要的一項：設(shè)置font-size為0。

why?：display: inline-block（inline）的元素間會有空白符出現(xiàn)（本質(zhì)是 HTML 中存在的空白符），會隨著字體的變大而變大（參考：詳解 display: inline-block）。要想水平居中，本人在當前例子中采用的方法是設(shè)置font-size為0（margin負值和字體大小、瀏覽器等都有關(guān)系）。

效果圖和flex布局一樣，盒模型同table-cell的盒模型。

參考與延伸：

display:table-cell的其他應用
垂直居中
flex和box的區(qū)別
去除inline-block元素間間距的N種方法