图片的居中如果掌握不好技巧会导致很多问题，例如图片的父容器改变位置或者改变定位方式导致居中失效等，写死长度的居中或者不能改变定位的居中都是很容易出问题的代码。下面这种方式可以让你的图片居中不受父容器和外界影响，也不受图片本身大小和比例影响。
方法/步骤
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 { 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%;}
上面是div为float的情况div如果是absolute或fixed也可以正常表现。只有一个div的情况下，代码如下
7
这张图片仍然是居中的，没有收到父容器的影响。
下一篇：怎样让DIV中的内容居中