页面宽度自动变换，背景图片始终居中

最近遇到这个一个问题，客户需要图片一直水平居中并且不变形，我们知道图片设置宽度100%，高度100%之后，会在不同设备下被分辨率强制变形，这样很不美观，因此客户提出来 水平始终居中 的要求，那么能实现吗？

能！禁用css就能实现 水平居中！

html:

<div class="banner">
	<div class="bgimg" style="background-image:url(../img/1.png)"></div>
</div>

css:

.banner{width: 100%;height: 390px;overflow: hidden;position: relative;}
.bgimg{width: 1920px; height: 390px;position: absolute; left: 50%; top: 0%;margin-left: -50%; margin-top: 0px;background-repeat: no-repeat;background-position: center;}	

原理和常用的弹框居中一样，通过定位left:50%，marginleft:-50%或者transform: translateX(-50%);都可以达到水平一直居中的效果！