满幅的背景,定宽的内容,这个需求很常见。简单说其实就类似块级元素的水平居中。

常见的做法:

margin: auto 发挥了什么作用?这条声明所产生的左右外边距实际上等于视口宽度的一半减去内容宽度的一半。我们可以把这个外边距的值表达为 50% - 150px。

我们可以进一步把这个长度值应用到父元素的 padding 上:

我们还可以把 max-width 一并去掉: