前言
目前轮播图banner比较常见，设计也大多是内容居中，两边延伸填充的做法。这样的话内容够的话延伸两边，不够的话自动从中间裁剪。
实现原理
利用relative的定位作用，设置页面的50%，再用css3的translateX属性，偏移自身的50%可以快速做到轮播图的始终居中展示。
<style>
.banner {
position:relative;
left:50%;
top:0;
transform:translateX(-50%)；
-webkit-transform:translateX(-50%);
}
</style>
<div>
<img class="banner" src="">
</div>
页面居中
常用的页面居中：
行内元素，text-align:center
块级元素：margin:0 auto和position配合trnasfrom的定位，其实margin还可以写-px抵消padding的内陷宽度
