Stick a DIV at TOP and middle using CSS

So far I have this:

<style>
#success_notification {
position:absolute;
top:0;
width:30%;
text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;开发者_高级运维
}

</style>

<div style="margin:0 auto;"><div id='success_notification'>TESTING.</div></div>

and the div stays on the left... still. What am I doing wrong? Thanks.

You aren't setting left or right, causing your absolutely-positioned element to default to a left of 0. Try this:

#success_notification {
    position: absolute;
    top: 0;
    left: 35%;
    width: 30%;
    text-align: center;
    font: 20px Georgia;
    color: #5C5C5C;
    background: #F2FFED;
    padding: 10px;
}

Here you go.

Removed the position: absolute, added the margin: auto to style, added width 100% to outer div. Works for me.

<style>
#success_notification {
top:0;
width:30%;
margin: auto;
text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;
}

</style>

<div style="width: 100%; margin:0 auto;"><div id='success_notification'>TESTING.</div></div>

try this:

#success_notification {
    position:absolute;
    top:0;
    left: 50%;
    width:30%;
    text-align:center;
    font:20px Georgia;
    color:#5C5C5C;
    background:#F2FFED;
    padding:10px;
}

...or even:

float:left;

...or:

float:right

this works great in all browsers