transform设置banner自适应居中裁剪

前言

目前轮播图banner比较常见，设计也大多是内容居中，两边延伸填充的做法。这样的话内容够的话延伸两边，不够的话自动从中间裁剪。

实现原理

利用relative的定位作用，设置页面的50%，再用css3的translateX属性，偏移自身的50%可以快速做到轮播图的始终居中展示。

页面居中

常用的页面居中：
行内元素，text-align:center
块级元素：margin:0 auto和position配合trnasfrom的定位，其实margin还可以写-px抵消padding的内陷宽度