使用 960 网格系统的中心内容 div答案

【问题标题】：Center content div using 960 grid system使用 960 网格系统的中心内容 div
【发布时间】：2011-12-22 09:02:52
【问题描述】：

这听起来很简单，但是。我根本做不到。这是我所拥有的：

<h1>Head </h1>
<div class="container_12" >
    <div class="grid_6">
        <h1>Heading one</h1>
        <p>Content and Images</p>
    </div>
        <h1>Heading two</h1>
        <p>Content and Images</p>
    </div>
    <div class="grid_12">The footer</div>
    </div>
<body>
</body>

对于任何类型的屏幕，我都需要带有grid_6 的 div 在中间垂直对齐。似乎带有container_12 的主 div 并没有占据页面的全高！？如何让内容 div 浮动在屏幕中间？

【问题讨论】：

您希望它水平和垂直居中吗？
框架确保它水平居中..我需要它垂直..
还要注意它不是 div 的内容。作为一个整体，div 应该在中间。

标签： css frameworks 960.gs

【解决方案1】：

为您的内容 div 提供 id

var screenheight = document.body.clientHeight;
var content_div_height = document.getElementById("content_div_id").offsetHeight;
var content_div_top = (screenheight/2) - (content_div_height/2)
document.getElementById("content_div_id").style.top = content_div_top + 'px';

【讨论】：

说真的，我期待一个 CSS 解决方案.. 让我看看这个！
对于垂直对齐，您必须给出顶部位置，对于纯 css 解决方案，将 body 设置为固定高度，然后将顶部位置分配给内容 div
谢谢！让它按照我的要求工作..你的代码是一个起点:)

【解决方案2】：

*{  
   margin:0;  
   padding:0;  
}  

body{  
   text-align:center; /*For IE6 Shenanigans*/  
}  

#wrapper{  
   width:960px;  
   margin:0 auto;  
   text-align:left;  
}

【讨论】：

看不出这会对垂直对齐有任何影响
OP 要求“垂直对齐”而不是水平。