1、打开在线写前端代码的网站如jsrun或者jsfiddle。
目2、标是做一个如图所示的效果，不同大小的图片。
3、每个方框的html 如下，
4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。
其中
display: table-cell;
text-align: center;
vertical-align: middle;
这3行决定居中效果。
其中
img {
max-width: 100%;
max-height: 100%;
}
的目的是让图片可以缩放而比例不变。
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
5、效果如下，很好的实现居中。
6、上面是div为float的情况
div如果是absolute或fixed也可以正常表现。
只有一个div的情况下，代码如下
div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
7、这张图片仍然是居中的，没有收到父容器的影响。
div图片居中-图片在DIV内居中，让图片中DIV盒子里水平居中。让图片中DIV对象盒子内水平居中，和让文字字体在DIV盒子内水平居中CSS相同。
CSS让对象内容居中样式单词为：
text-align:center
text-align 为内容居于对象什么位置属性center值为居中
一、传统HTML让图片横向水平居中方法
直接在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。
align="center"使用方法：
二、CSS让图片中DIV对象内水平居中
使用CSS样式让DIV内图片居中（水平居中）
2、水平居中实例
div.layout { position:relative;width:100%;margin:auto }
img { width:100px;position:absolute;left:50%;margin-left:-50px }
