我如何伪造一个容器以使其居中并使其响应？答案

【问题标题】：How an I fake a container to appear centered AND make it responsive?我如何伪造一个容器以使其居中并使其响应？
【发布时间】：2013-08-03 23:58:40
【问题描述】：

我是一个相对较新的前端开发人员，从来不需要跳出框框思考。对于工作，我有一个我以前没有做过的设计。

我们使用垂直导航菜单而不是水平导航菜单，它会粘在屏幕的左侧，我们需要一个居中的容器。该网站需要响应。

背景信息：

左对齐的垂直菜单宽度为 211 像素，高度为 300 像素。容器宽 960 像素。

问题：

因为导航菜单占据了 211px 的屏幕宽度，使用 margin: 0 居中的容器会自动与菜单重叠。所以我决定尝试使用以下方法来伪造它：

margin: -22px 0px 0px 255px;

但正如您所见，这样做并不能保证容器会在所有浏览器/平台上出现在同一个位置，而且对于响应式设计来说有点不利。

问题：

使用上述信息，我怎样才能正确地创建一个垂直菜单，该菜单向左对齐，宽度为 211 像素，高度为 300 像素，以及一个 960 像素宽的容器，该容器需要从屏幕尺寸而不是从屏幕尺寸居中菜单本身？另请记住，我需要对此做出响应。

我是新手，有点迷茫。

【问题讨论】：

【解决方案1】：

听起来你想要这样做。

如果您为要驻留的内容创建一个额外的容器，

<div id="container">
    <div id="nav">nav</div>
    <div id="contentContainer">
        <div id="content">content</div>
    </div>
</div>

你可以简单地给#content一个：

margin: 0 auto

它应该保持居中。您需要做的最重要的事情是考虑所有这些数字的百分比。否则，您需要使用一些 javascript 将 #contentContainer 调整为一定大小：

document.width-211;

我认为这并不理想。

【讨论】：