Posted on 1 Comment

Quick Code: Complete Centering of a Page

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]

1 thought on “Quick Code: Complete Centering of a Page

  1. […] 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) […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.