Center the Content on the Page using CSS

Question

I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.

i tried using vertical align center. But it seems not to work.

Which are the best practices to do so ?

http://play.mink7.com/h/mspre/

Answer 1

If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.

If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.

For example:

.someElement {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
}

Answer 2

For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.

#container { width: 900px; 
margin: 0px auto 0px auto; 
}

This will centre the div. Bob's your uncle.
If you want I can post examples of this.

Mike