将宽度超出视口的元素居中

Question

我想将宽度超出视口的元素居中（即element = 1000px / viewport = 800px）。我已经尝试过基本的CSS（margin = 0 auto），但它不起作用。如果有人可以帮助我，那会很棒！

我有三个子元素（.project），其宽度是通过jQuery计算的。而且，这三个子元素的总和是我父元素的宽度（#projects）。

这是jsFiddle。

干杯

$(window).on( "resize", function () {
    var projectWidth = ( $(window).width() / 2.8 );
    $(".project").css({ width : projectWidth.toFixed() });

    var projectSum = 0;
    $("#projects .project").each( function(){ projectSum += $(this).width(); });
    $(".container").css({ width : projectSum });        
}).resize();

Answer 1

使用CSS非常简单。下面是一个示例，其中body设置为400px宽，600px的元素在中间对齐。

数学只是(containerWidth - divWidth) / 2，然后将此值用作margin-left和margin-right，您可以使用JS的动态宽度。

http://jsfiddle.net/da8y64ww/1/

body {
    width:400px;
    border:1px dotted blue;
    margin:0 auto;
}
#foo {
    width:600px;
    height:100px;
    border:1px solid green;
    margin-left:-100px;
    margin-right:-100px;
}