margin 0 auto; for sticky footer inside the slider

Question

Here is a my code:

CSS:

{
    margin      : 0;
    font-family : Arial, Helvetica, sans-serif;
}

html
{
    height : 100%;
}

body
{
    height              : 100%;

    background-color    : #d1e3ec;
    background-image    : url(img/map-v.jpg);
    background-repeat   : no-repeat;
    background-position : top center;
}



#wrapper
{
    min-height : 100%;
    height     : auto !important; /*IE6*/
    height     : 100%; /*IE6*/
    margin     : 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
}


.content
{
    overflow : hidden;
    width    : 200px;
    margin   : 0 auto;
}

#footer, #push
{
    height : 70px; /* .push must be the same height as .footer */
}

#footer
{
    background-color : #019790;
}





#global-container
{
    overflow   : hidden;
    position   : relative;
    width      : 100%;
    min-height : 100%;
}


#slider
{
    background : green;
    height     : 100%;
    position   : absolute;
    left       : 0;
    margin     : 20px 0 0 0;
}

#slide-link
{
    position : absolute;
    top      : 0;
    left     : 0;
    z-index  : 9999;
    height   : 20px;
}

HTML:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<script src="js/bootstrap.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


<div id="global-container">
    <div id="slide-link" style="border:1px solid red; width:100%;"><a href="#" >Click here</a></div>
    <div id="slider" style="border:1px solid red;">
        <div id="wrapper">
            <div class="content">content</div>
            <div id="push"></div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</div>

Test script:

$(document).ready(function ()
{
    $("#slide-link").click(function ()
    {

        if ($("#slider").is(":visible"))
        {
            var containerHeight=$("#global-container").height()-25;

            $("#slider").hide("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:containerHeight}, 1050)

        } else if ($("#slider").is(":hidden"))
        {
            $("#slider").show("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:'0px'}, 950)
        }
    });
});

The code does what it does and it works OK: it has a sticky footer and when you can press the link, it hides/shows it back and force. All I want is to align the block id="slider" to the center like we do when use margin:0 auto; without breaking the rest functionality. I don't know why but margin 0 auto; doesn't work.

Answer 1

To Place the absolute positioned elements in the middle of it's container:

#slider {
  left: 50%;
  margin-left: -100px; (negative of half of the width of the element)
}