居中一个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 */
}

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

CSS:

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

jQuery的:

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

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

DEMO