图片水平居中显示实验

　　测试对于不同宽度图片以不同方法实现水平居中效果，以对以后居中需求提供参考。

　　测试准备：

　　　　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>