Search code examples
htmlcssvertical-alignment

Center the Content on the Page using CSS

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/

Solution

  • 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;
}