The following code will completly center your page.
#horizon
{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%; /* positioned absolutely 50% from the top */
left: 0px;
width: 100%; /* 100% wide */
height: 1px; /* nominal height of 1px */
overflow: visible; /* overflow is set to ‘visible’ */
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -125px; /* negative margin that is exactly half of its width */
position: absolute;
top: -35px; /* negative top position that is exactly half of its height */
left: 50%; /* positioned absolutely 50% from the left */
width: 250px;
height: 70px;
visibility: visible
}
____
[div id=”horizon”]
[div id=”content”]
This is the centered box
[/div]
[/div]
[…] I previously had a post showing how to completely center a page, which works, however if the browser becomes too narrow then the page’s far left side becomes hidden as the center of the page continues to take precedence. (Also the previous post would explain how to also center vertically as WELL as horizontally) […]