前提
图片大小为：399*367，没有凑成整数-_-
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不能少，图片设置绝对定位、上下左右值均为0 ，margin: auto必不可少，效果如下图：
margin:auto法居中效果图
浏览器中图片的盒子模型：
margin:auto法图片盒子模型
上下左右的位置均为0，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法图片盒子模型
注意：position上下左右的值均不一样，但是用left的值加上margin-left的负值的结果是多少呢？250-199.5=50.5，和right的结果值一样，正好水平居中。top和bottom的关系同理。
3、变形
div样式依然不变，img样式变为：
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的宽度为宽度，只需设置div的样式，img不需要设置。
div {
border: 1px solid #465468;
width: 500px;
height: 400px;
display: -webkit-box;//将此元素及其直系子代加入弹性框模型中
-webkit-box-pack: center;//设置沿 box-orient 轴的父元素中子元素的排列方式。
-webkit-box-align: center;//设置框的子代在框中的排列方式,如果方向是水平的，该属性就会决定垂直排列
}
效果和第一张图一样，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;
}
只需给父级元素设定flex属性值即可，内部img或者文字不需要设置其他属性，显示效果如下：
flex布局
没有设置宽度的话自动以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%;
}
首先设置img垂直居中；然后，给伪类设置display: inline-block，这样伪类的高度就比较准确了，而不是一开始默认计算的值（div有高度的话和div一样，没有的话为0），再设置vertical-align: middle，让伪类的内容也垂直居中，欧了。
最后比较重要的一项：设置font-size为0。
why?：display: inline-block（inline）的元素间会有空白符出现（本质是 HTML 中存在的空白符），会随着字体的变大而变大（参考：详解 display: inline-block）。要想水平居中，本人在当前例子中采用的方法是设置font-size为0（margin负值和字体大小、浏览器等都有关系）。
效果图和flex布局一样，盒模型同table-cell的盒模型。
参考与延伸：
display:table-cell的其他应用
垂直居中
flex和box的区别
去除inline-block元素间间距的N种方法
网友评论