html - 将 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>

score 6 · Accepted Answer

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

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

如果您不知道.container. 基本上相同的结果，您只需要通过将宽度减半来计算负边距：

CSS：

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

jQuery：

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

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

1 回答 1