绝对位置和边距：自动答案

【问题标题】：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 &copy 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 可以在这里找到：stackoverflow.com/questions/9998260/…
可能重复：stackoverflow.com/questions/9350775/…

标签： html css position margin

【解决方案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 以获取示例

【讨论】：