html - 将一个 div 居中，部分在屏幕外

Question

我希望将超出屏幕的大 div 居中。这涉及到有一个大约 1920px 宽的大 .container div，实际内容在 .container 中居中具有 .content 类的 div，宽度约为 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