图片水平居中显示实验
测试对于不同宽度图片以不同方法实现水平居中效果，以对以后居中需求提供参考。
测试准备：
PC浏览器chrome
PC浏览器宽度大概 1000px
宽度小的图片: 500px， http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg （感谢新华网贡献的妹子）
宽度大的图片: 1920px， http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg (很好看哦)
对容器设置text-align:center
此种方法：
居中效果对于宽度小于浏览器宽度的图片有效，对于大于浏览器宽度的图片显示左边部分；
缩小浏览器宽度， 小图片能够自动居中调节；
有水平滚动条，向右拖动，小图片不居中调节，向左边滚动。
<html> <head> </head> <body style="text-align:center"> <img src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
对图片设置margin:0 auto
此种方法，需要设置img标签为block模式，否则居中效果不生效：
居中效果对于宽度小于浏览器宽度的图片有效，对于大于浏览器宽度的图片显示左边部分；
缩小浏览器宽度， 小图片能够自动居中调节；
有水平滚动条，向右拖动，小图片不居中调节，向左边滚动。
实现效果同 text-align:center，但是此种效果是对元素，更加适合。
<html> <head> </head> <body> <img style="margin:0 auto; display: block;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="margin:0 auto; display: block;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
margin-left:-图片一半宽度px
此方法利用相对定位思想，将图片通过left和margin定位居中。
小图片同上两个方法的效果。
大图片也可以起到居中的效果，但是对于两边不能显示的部分，左边的部分不能查看，右边的部分可以通过拖动水平滚动条查看。
缩放浏览器，大小图片都居中显示。
<html> <head> </head> <body> <img style="left:50%;margin-left:-250px; display: block; position: relative;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="left:50%;margin-left:-960px; display: block;position: relative;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
给body加个隐藏属性，可以讲水平滚动条隐藏掉
<html> <head> </head> <body style="overflow:hidden;"> <img style="left:50%;margin-left:-250px; display: block; position: relative;" src="http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg"/> <img style="left:50%;margin-left:-960px; display: block;position: relative;" src="http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg"/> </body> </html>
通过类似手段，组合父对象，可以垂直和水平同时居中，见：
http://www.okajax.com/a/201105/css_div_pic.html
background 方式
此方法，将图片作为div的背景，使用背景的center属性
对于大小图片，都可以做到居中显示，缩放情况下也自动调节居中；
同时对于大图片，不会出现水平滚动条，宽度变大过程中， 两边不嫩能显示的内容逐步显示；
除了牺牲一些img语义，或者说可访问性， 其效果同上。
<html> <head> </head> <body> <div style="background:url('http://news.xinhuanet.com/photo/2013-04/23/124621256_11n.jpg') center no-repeat;height: 693px;"></div> <div style="background:url('http://pic.rmzt.com/2012/07/27/xgsymv1-1.jpg') center no-repeat;height: 693px;"></div> </body> </html>
