Position absolute and margin: auto

问题

I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.

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;
}

回答1:

Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.

Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/

Therefore, footer would become:

#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;
}

If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute

回答2:

To have a footer at the bottom, centered horizontally, you can apply the following CSS:

footer{
    width: 100%;
    max-width: 600px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.

See this Fiddle for an example

来源：https://stackoverflow.com/questions/15961232/position-absolute-and-margin-auto

标签

html

css

position

margin