我正在使用在图像焦点上与三分法对齐的图像，并且background-image将图像放在页面中。
当用户使用平板电脑(或更大的)设备时，我使用background-position:50%;，这很好;我不介意这幅画歪向一边。
然而，在移动设备上，我希望主题(位于右侧第三行规则上——参见我的JSBin示例)水平居中于屏幕。我知道我可以使用不同的百分比，如background-position:75% 50%来接近它，但随着设备宽度的变化，75%不再是"中心"。
有没有一种方法，不写一百种不同的媒体查询，使它始终居中，有background-position是动态的，足以始终居中的移动图像?
这是我正在看的JSBin。
一些假设:
- 图片将始终按照三分法对齐
- 图片将始终具有相同的物理尺寸
- 在IE9+下工作
- 不担心垂直对齐
对于小于768px的字体:
background-position: -50vw;
在这种情况下，你可能需要将背景大小设置为150%而不是覆盖。