[SOLVED] Centering Vertically

R8515198 · #1 (**permalink**) Dec 6th, 2007, 08:32

Good Morning,
I am trying to center the body html vertically and horizantally. Thought it would have been very simple.

body {
 background-color:#313e5b;
 margin:auto;
 padding:0;
 text-align:center;
 width: 780px;
 height: 500px;
}

Where am I going wrong?

Cheers

Dan

Marc · #2 (**permalink**) Dec 6th, 2007, 08:38

Centering your site vertically is a pain in the butt.

I have never tried to center a website vertically but i have found an example here: http://www.wpdfd.com/editorial/thebox/deadcentre4.html.

welshstew · #3 (**permalink**) Dec 6th, 2007, 08:53

never tiried it before but look here, it seems to have the solution you are looking for, you can also look at W3C for an example

hschmitz · #4 (**permalink**) Dec 6th, 2007, 10:48

Hi Dan,

the problem is, that you cannot change the size of the body element. The body element always represents the complete visible page. Instead you have to place a separate div inside the body. To get that div centered, try something like

Code: Select all

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -390px;
  width: 780px;
  height: 500px;
  background-color:#313e5b;
}

And the HTML should then look like

Code: Select all

<body>
<div class="centered">
    Content here
</div>
</body>

Hope this helps

R8515198 · #5 (**permalink**) Dec 6th, 2007, 10:57

hschmitz,
That has worked so much less code. If i was to change the height how would I know what measurements the others should change to,

For example height to 600px.

Cheers for this help everyone. Greatly apprieciated

Daniel

Marc · #6 (**permalink**) Dec 6th, 2007, 11:05

Code: Select all

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -390px;
  width: 780px;
  height: 600px;
  background-color:#313e5b;
}

Daniel, that code above should do the trick.

Basically for the margins (left & top), you need to half the widths and heights so:

margin-top = -height / 2
margin-left = -width / 2

Hope that helps in future!

Thread marked as solved!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Centering horizontally and vertically	Emzi	Web Page Design	4	Nov 1st, 2007 16:07
[SOLVED] Problems with centering in CSS.	mcdanielnc89	Web Page Design	26	Nov 1st, 2007 06:07
[SOLVED] Centering!	mcdanielnc89	Web Page Design	20	Oct 21st, 2007 22:02
Vertically centering Div's	verkevinmanering69err455	Web Page Design	3	Mar 19th, 2007 17:22
centering vertically	benbacardi	Web Page Design	17	May 27th, 2004 13:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Centering Vertically