灵光乍现：巧妙居中显示原始大图片！

今天在锤子手机官网看到一个 活动页。它的内容布局让我学习了。

.wrapper-banner
    .content-banner
        img
        a.hot
        a.hot
复制代码

.wrapper-banner 是个普通的 div block 元素；.content-banner 是 relative 的；img 是一张 大~图片，宽 2560px；a.hot 是绝对定位元素，使用了 left、top、width 和 height 用于锁定图片的某块区域作为点击区域（图片里有两个商品活动，所以有两个 a.hot）。

.content-banner 设置了 2560px 的宽（与内部图片的原始宽度一样），为了能让内部图片原样显示。但有一个问题：

img 图片很宽，活动内容在图片中间了，而图片两边有等量大量的留白。怎么让图片能居中显示呢？

是这样的——

.content-banner {
    width: 2560px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
复制代码

position 是 relative 的元素，其包含块是 最近的 block container，即 .wrapper-banner。百分比值的 left 是相对于包含块宽度偏移的。那现在问题来了——.wrapper-banner 的宽度到底是多少呢？

答案： .wrapper-banner 的宽度是父级元素的宽度，因为 block 元素默认是撑满父级宽度的。注意，不是 img 撑开的 2560px！这很容易弄错（我就是这样）。

也很好证明，给 .wrapper-banner 一个 background color，往右滑动水平滚动条（内部 img 撑开的），发现背景色并没有覆盖一屏外更宽的区域。

对于当前场景：.wrapper-banner 就是当前视口的宽度了，或者说是一屏的宽度。

left: 50%; 让 .content-banner 的左边缘在屏幕中间的位置。然后使用 translateX(-50%)，.content-banner 向左偏移自身宽度的 50%（应该是相对于于元素的 border box）！此时图片就居中了。当然，图片因为偏移而超出屏幕左边缘的部分，都被截取了（当然要这样，要不然还能将滚动条往左滚动划回去！？）

最后还要给 .wrapper-banner 一个 overflow: hidden; 这样水平滚动条就消失了。

最终使用样式如下：

.wrapper-banner {
    overflow: hidden;
}

.content-banner {
    width: 2560px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.content-banner img {
    display: block;
    width: 100%;
}
复制代码

（完）