centering div on page help

[MDanz]

can i get the correct code to center this div.  I've tried margin 0  auto, text-align: center etc but it still stays to the left of the page

 

#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
left: 20px;
top: 300px;

background-color: #000000;
border: 1px solid #FBB917;
padding: 10px;

}

[MDanz]

#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
   top: 0px;
    left: 50%;
    margin-left: 300px;


background-color: #000000;
border: 1px solid #FBB917;
padding: 10px;

}

 

this works but when i change screen resolution it won't any help??

[Hybride]

Don't use absolute positioning for that - it does exactly what it says, absolutely positions the div container, and does not become fluid on the resolution. Removing them should get rid of the problem (and then changing the top/lefts, as those are absolutes).

 

And using "text-align:center" is best in the body{} tags then using a "text-align:left" in your div to align the text left.

[haku]

If you absolutely must use absolute positioning, you can do this:

#layer1 {
   position: absolute;
   visibility: hidden;
   width: 400px;
    left: 50%;
    margin-left: -200px;
}