Div 容器不以边距自动居中

Question

我在将我的容器置于我的网站上时遇到问题。我希望这个容器居中并覆盖大约 80% 的页面。这样我就可以在其中放置图像滑块和文本。 Margin: 0 auto，似乎不起作用。容器的背景颜色仅在位置设置为绝对时显示。我在这里做错了什么？

CSS

@charset "utf-8";
/* CSS Document */

#container {
top: 125px;
left: 0;
margin: 0 auto;
width: 70%;
background-color: #b0e0e6;
height: 100%;
position: absolute;
}

#header {
background-color: #2f2f2f;
height: 125px;
top: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#footer {
background-color: #2f2f2f;
height: 30px;
bottom: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#logo {
position: fixed;
z-index: 2;
}

#logo img {
height: 100px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>

<div id="logo"><img src="images/jpl101-300x254.png" /></div>
<div id="header"></div>
<div id="footer"></div>


<div id="container">




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

与我想要做的相比，这就是我的最终结果。

Answer 1

尝试（将边距更改为百分比）

#container {
margin: 0 15%;
width: 70%;
background-color: #b0e0e6;
height: 100%;
}

你有 70% 的宽度，所以从剩下的 30%，你将它除以 2，每边（左和右）各 15%，就完成了。 Here is something similar

Answer 2

您需要使用 margin-top 而不是 position: absolute 与 top 结合使用：

#container {
    margin: 0 auto;
    margin-top: 125px;
    width: 70%;
    background-color: #b0e0e6;
    height: 100%;
}

基本上 position 和 margin 并不能很好地协同工作。

Answer 3

您已将其设置为 position: absolute，这意味着如果您还设置了 left:0;right:0;

，它将仅以 margin: 0 auto 为中心

div { 
    padding: 10px; 
    background: #2d2d2d; 
    color: #fff; 
    font-weight: bold; 
    text-transform: uppercase; 
}

.center {
    position: absolute;
    margin: 0 auto;
    width: 70%;  
}

.one { left:0; }

.two {
    left:0; right:0;
    top: 200px; /* so you can see it */
}

<div class="center one">First</div>
<div class="center two">Second</div>

不过，看起来你根本不应该在这里使用 position: absolute。

Answer 4

你只需要添加一个right:0；到您的容器以强制边距 "bind" 到屏幕右侧并自动填充边距。

Answer 5

环绕你的 div 然后居中。

Example Fiddle

css:

.containerWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
}
#container {
 margin: 0 auto;
 width: 70%;
 background-color: #b0e0e6;
 height: 100%;
 position: relative;
}

html:

<div class="containerWrapper">
    <div id="container"></div>
</div>

Div 容器不以边距自动居中

Div container not centering with margin auto

html

css

jquery

web