如何使 3 列 Css Div 站点居中？答案

【问题标题】：How to center a 3 column Css Div Site?如何使 3 列 Css Div 站点居中？
【发布时间】：2013-10-27 07:46:02
【问题描述】：

我的网站有一个 100% 宽度的页眉和页脚，以及 3 列。列都需要固定宽度，但在页面的中心。

HTML

<div id="Table_01">
    <div id="Header"></div>
    <span id="LeftCol">Left Col </span>
    <span id="MidCol">Middle    </span>
    <span id="RightCol">Right Col   </span>
    <div id="Footer">Footer</div>
</div>

CSS

 #Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}    
#Header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:42px;
    background-image: url("images/Header.gif");
}
#LeftCol {
    position:absolute;
    left:0px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#MidCol {
    position:absolute;
    left:300px;
    top:42px;
    width:550px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#RightCol {
    position:absolute;
    left:850px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#Footer {
    position:absolute;
    left:0px;
    top:464px;
    width:1000px;
    height:1536px;
}

JSFIDDLE

【问题讨论】：

称系统愚蠢不会引起同情。你可以在这里发布你的代码。 Ctrl+V 适用于 SO ;)
如果太傻了，去别的地方问个问题吧，我更喜欢先看这里的代码，然后再看实际操作
它不会让我发布没有代码的链接。如果我添加代码，它的格式会很糟糕并且仍然给我错误
左列中间右列
页脚
是的，它不会让你这样问题可以更加独立并且对其他人更有用。 SO 不仅是为了解决你的问题，也是为了在未来帮助别人。将代码放在这里会更容易（而不是作为评论，让您的问题看起来不错）

标签： css layout html

【解决方案1】：

您需要将position:relative 和margin:0 auto 混合应用于容器。

添加一个容器 div：

.container {
    width:1150px;
    margin:0 auto;
    position:relative;
}

查看更新的JSFIDDLE

【讨论】：

感谢您提供实际答案。这行得通，尽管我将标题放在标题之后仅使 3 列居中，因此标题被拉伸。谢谢！
当然，根据需要调整 ;)