如何使具有许多 div 结构的网页内容居中答案

【问题标题】：How to center webpage content with many div structures如何使具有许多 div 结构的网页内容居中
【发布时间】：2013-09-19 02:10:48
【问题描述】：

我正在处理一个页面，我想将该页面置于浏览器的中心。它在放大时按预期工作。但是当它缩小时，页面会向右移动。有人可以告诉我我做错了什么吗？谢谢。

如果我缩小它会变成：

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>
</body>
</html>

这也是css部分：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
#container {
    position: relative;
    z-index: 3;
    width: 1000px;
    margin: 0 auto 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 1500px;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

【问题讨论】：

标签： html css center footer

【解决方案1】：

body 的width 不应为 1500px，应为 100%； #container 应该是 max-width:1000px; width:100%; 另外，将#container 锚定到body

请进行以下更改：

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
body #container {
    position: relative;
    z-index: 3;
    max-width:1000px;
    width:100%;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 100%;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

您可以在 jsfiddle 上看到这一点：http://jsfiddle.net/MX9kC/

【讨论】：

另外，当我缩小页面时，页面仍在中心，但您可以看到页面右侧有额外的空间。你知道如何解决这个问题吗？
我认为可能是#main 宽度大于容器，也应该使#main 宽度为 100%。作为专业提示，永远不要使用宽度，使用 max-width 和 %，以便您制作的网站能够响应不同的设备。
你也可以在#main 上做overflow:hidden，但我认为它的宽度应该更小，因为#main 的x,y 位置在#container 的左上角。你使用的是什么浏览器？您应该使用 chrome inspector 或 firefox firebug，它们真的可以帮助您处理很多 css。挽救了我的生命数百万次。

【解决方案2】：

删除<body> 标签上的宽度，这将解决您的问题。

【讨论】：

【解决方案3】：

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->

<center>
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>

</center>
</body>
</html>

会有用的

【讨论】：

不要使用。它是古老的和已弃用的。这也解决不了问题。