居中一个div，部分屏幕外

Question

我希望将一个超出屏幕的大div放在中心位置。这涉及到大.container div大约1920px宽，实际内容集中在.container div内，其类.content }，约1200px宽。

我设法将一个放在另一个中心，但是当它的边界在屏幕外时居中.container不起作用。它将左边框放在浏览器的左边框上。

[ |   [content]   | ]

Legend:
| = screen edge
[ ] = div edge

.content必须始终位于.container的中心位置，以便背景与前景相关的位置不会发生变化。

<div class="container">
  <div class="content">
    <section></section>
  </div>
</div>

Answer 1

如果你知道.container的宽度，你可以这样做：

.container {
    position: relative;
    left: 50%;
    margin-left: -960px; /* Negative margin half of the element width */
}

---

如果你不知道.container的宽度，这是一个（脏的）jQuery替代品。基本上相同的结果，您只需要通过将宽度减半来计算负边距：

CSS：

.container {
    position: relative;
    left: 50%;
}

jQuery的：

var elWidth = (($('.container').width())/2)*-1;

$('.container').css('margin-left', elWidth);

DEMO