CODEWITHSUNDEEP
htmlcssvertical-alignment
Harsha M V
Harsha M V

Reputation: 54949

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/

Upvotes: 7

Views: 29452

Answers (4)

Santhosh
Santhosh

Reputation: 1

Try the following style if you want to make the content to center point of the page.

.className {
   margin: auto;
   max-width: 1280px;
}

Upvotes: 0

Mackey18
Mackey18

Reputation: 2352

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

Upvotes: 5

Billy Moat
Billy Moat

Reputation: 21050

Here you go:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Upvotes: -1

Jezen Thomas
Jezen Thomas

Reputation: 13800

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

Upvotes: 10

Related Questions