Crystal Groves

To center a page vertically and horizontally in HTML is fairly simple. The method below works in all Windows browsers and I believe all Apple browsers, but it has trouble working in Linux browsers from what I’ve seen (I’ve seen it not work for the vertical alignment, only for horizontal, but this could have changed since).

Essentially all you do is:

1. Position your container div absolutely.
2. Place the top and left positions as 50%.
3. Set a height and width (since this is also for centering vertically).
4. Set the top and left margins to a negative number that is half the height and width you set. So if your width is 300 pixels, you’d set your margin-left to -150 pixels. If your height is 400 pixels, then set your margin-top to -200 pixels.

Sample:

.wrapper_container {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 545px;
margin-left: -450px; /*set to a negative number 1/2 of your width*/
margin-top: -272px; /*set to a negative number 1/2 of your height*/
background: url("/images/ui/splash.jpg") top left no-repeat;
display: block;
}


Naturally most people just want to center horizontally, in which case everyone just sets the body tag to text-align center (for IE), and then the container div to margin: 0 auto; (for FF). This is fairly common practice, I’m just including it here for posterity.

Sample:

body {
text-align: center;
}


.wrapper_container {
width: 980px;
margin: 0 auto;
}


In 2007 and 2008 I was involved in working on a project at work called “Scientists Without Borders“.  I’ve been meaning to do a post about it since, but for some reason never did.

It actually felt good to work on this project, despite the pains that come with every project.  I felt like I was somewhat contributing to the less fortunate from my little corner of the world.  Like “Doctors Without Borders“, this site was intended to help spread science and the skills of science teachers and programs to third world countries, or less fortunate countries.  It’s a project started by the New York Academy of Sciences (another site we are in the process of redoing that should launch this year), who is I believe a leader in the Science World on the Webosphere.

Almost all of the html/css you’ll see on the site is mine, but don’t look too closely, because when merging html/css with a .NET framework, it loses a lot of it’s w3 validity luster.