绝对位置和边距：自动
Posted
技术标签:
【中文标题】绝对位置和边距：自动【英文标题】：Position absolute and margin: auto 【发布时间】：2013-04-04 09:11:31 【问题描述】：我有一个小问题，我希望我的页脚与position: absolute 保持在屏幕底部。但是我把它放在屏幕中间的margin: auto 不再起作用了。
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<a href="index.php"><div class="link">Home</div></a>
<a href="wie.php"><div class="link">Wie is wie</div></a>
<a href="fotos.php"><div class="link">Foto's</div></a>
<a href="repertoire.php"><div class="link">Repertoire</div></a>
<a href="links.php"><div class="link">Links</div></a>
<a href="contact.php"><div class="link">Contact</div></a>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS：
/* PAGE LAYOUT */
html
padding: 0px;
margin: 0px;
body
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
.clear
clear: both;
/* HEADER */
#header
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
#logo
width: 283px;
height: 100px;
margin: auto;
#logotitel
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
/* NAV */
#nav
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
#links
width: 600px;
height: 50px;
margin: auto;
.link
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
.link:hover
color: #282828;
text-decoration: underline;
/* CONTENT */
#content
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
/* FOOTER */
#footer
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
#copy
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
【问题讨论】：
你的问题有相当多的代码。为了尽快获得更好的帮助，请发帖SSCCE (link)。 anwnser 可以在这里找到：***.com/questions/9998260/… 可能重复：***.com/questions/9350775/… 【参考方案1】：由于您知道页脚的宽度（1100 像素），您可以通过 left:50%;margin-left:-550px 将其居中。
示例：将绝对定位的元素居中http://jsfiddle.net/vdWQG/
因此，页脚将变为：
#footer
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
如果您希望元素在用户向下滚动时停留在页面底部，请使用position: fixed 而不是position:absolute
【讨论】：
但是当页面比屏幕长时它不起作用，它停留在它渲染的那个位置？第一的。当我滚动时它不会停留在底部:( @YoshiPeters 使用position:fixed 而不是absolute。更新答案
好在 CSS 让我们免于编写糟糕的 HTML 和混乱的布局规则！【参考方案2】：
要在底部有一个水平居中的页脚，您可以应用以下 CSS：
footer
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
这将使固定元素居中，但也会保持响应，因为当浏览器变得小于页脚宽度时，它会缩小。
请参阅此Fiddle 以获取示例
【讨论】：
以上是关于绝对位置和边距：自动的主要内容，如果未能解决你的问题，请参考以下文章