Question

我的网站上有一个大横幅，横幅上有旋转图像，所有这些都在<div>内。它延伸到整个页面，图像很大，宽度为2000像素，因此几乎无论屏幕宽度如何，图像都会一直向左和向右扩展。

如何保持<div>的中心位置，使其内部的所有内容与页面内容（约1000px）对齐，即使页面宽度拉伸，也会保持在那里？

现在，无论宽度如何，图像的左侧都会粘在页面的左侧，因此图像会根据窗口的宽度相对于页面内容移动。这是<div>现在

上的代码

position: relative;
display: block;
width: 2000px;
height: 648px;
margin: 58px auto 0 auto;

谢谢！

Answer 1

当宽度超过页面宽度时，我似乎只能这样做的方法是使用CSS3 calc函数：

left: -webkit-calc((2000px - 100%) / -2)

这实际上将左值设置为剩余的一半。 -webkit-前缀使其与Chrome兼容。如果您选择实施此解决方案，则必须根据需要添加其他浏览器前缀。

Answer 2

你试过了吗？

<img style="position:absolute;left:50%;margin-left:-1000px;"/>