将带有固定菜单的 div 居中

Question

我正在尝试创建一个网站，在左侧有一个固定的“侧边栏”，“内容”在网站的其余部分（右侧）上垂直和水平居中。 无论屏幕大小如何，我都希望“内容”始终居中。 我试过 margin-left:auto; 和 margin-right:auto; 但是当我这样做时，内容将自己定位在侧边栏的顶部。 谁能帮我？ 这是一个图像链接以显示我的意思https://www.dropbox.com/s/95duw8yrmlwtc26/Sk%C3%A4rmavbild%202015-01-22%20kl.%2011.51.10.png?dl=0 . 这是我目前拥有的代码，其中侧边栏是“旁边”，内容是“主要”中的所有内容：

<aside> this box should always be fixed on the left and have a height of     100%. 

</aside><!--end side--> 


<main>

<div id="submenu">
<ul>
<li>LOGOS</li>
<li>PRINT</li>
<li>WEB DESIGN</li>
<li>ALL</li>
</ul>
</div>

<div class="content">
<ul>
<li><img src="img1" alt="img1"/></li>
<li> <img src="img2" alt="img2"/></li>
<li> <img src="img3" alt="img3"/></li>
</ul>
</div><!--end content-->
</main>

aside{
background-color:#3A364F;
width:340px;
height:100%;
min-height:710px;
position:fixed;
float:left;

}
main {
width:67%;
float:left;
margin-left:auto;
margin-right:auto;
}

Answer 1

这可能是一个很好的解决方案，如果您准备使用 CSS3（尚未“正式”推出，但大多数浏览器（如果不是全部）都支持它）：

div#submenu {
    background-color:#3A364F;
    width:340px;
    height:100%;
    min-height:710px;
    position:fixed;
    top: 0px;
    left: 0px;
    background-color:blue;
}
div.content {
    margin-left:340px;
    margin-right:auto;
    background-color:red;
}

我设置了一个jsFiddle来演示这段代码。

margin-left:auto; margin-right:auto margin-left:auto; margin-right:auto仅在放置它的对象具有指定宽度（即，不是百分比）时才有效。 我相信使用calc(...)最终会解析为“指定的宽度”。 如果您的意思是希望内容实际上位于剩余区域的中心（而不仅仅是占用子菜单未占用的所有空间），那么您可以做的是在红色<div class="content"> <div>内添加另一个<div> <div class="content">有规则，然后将嵌套的<div>在其红色父级内。

代码的另一个问题可能是您将 CSS 规则应用于不存在的对象； 我假设您希望将规则aside应用于 submenu 和main应用于content 。

Answer 2

也许你也可以看看一个好的框架来创建你的网站。 许多框架都有模板和良好的文档来构建站点。 好的框架是 Bootstrap、Foundation 和 Skeleton。

如果你想坚持你当前的构建，Alec 的解决方案，你实际上计算了给定测量值 340px 周围的剩余空间；