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

【问题标题】：Center an element whose width is beyond the viewport将宽度超出视口的元素居中
【发布时间】：2014-10-15 13:22:59
【问题描述】：

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

我有三个子元素 (.project)，它们的宽度是通过 jQuery 计算的。此外，这三个子元素的总和就是我的父元素（#projects）的宽度。

干杯

$(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();

【问题讨论】：

你能为我们做一个JSFiddle吗？
你读过this和this吗？
我读过那些帖子，是的。但是，由于我使用的是动态宽度，因此情况有所不同。
不太清楚您想要什么？：这？ jsfiddle.net/ufezqsvs/2 然后居中？ jsfiddle.net/ufezqsvs/3 如果你放弃浮点数来显示表格或内联块，那么容易得多，而且 li 可以有任何宽度。
我的意思是关于 inline-block 和 table-cell ：jsfiddle.net/ufezqsvs/5（玩 lis 的内容

标签： jquery css viewport centering

【解决方案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;
}

【讨论】：