CSS

Buy me a beer or a book?

amazon PayPal - The safer, easier way to donate online!

Vertically centred website using CSS

Placing your website in the centre of the screen can often be a potential minefield, but as a rule of thumb if you want to make a website that is just a box in the middle of the screen, which, is very aesthetically pleasing but does not use the real estate of the screen to its full usability. Anyway that a side you need to bare in mind the most common resolution (at the time of writing this post) is 1024x768 which means you only have about 950x565 to play with screen real estate.

So in all you first need the CSS which is ver simple a containing block element which scopes the width and height of the page, and then a second positioning div which defines the area of the centred block item:

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body
{
background:#000000;
}
 
#wrap {
position:absolute;
top:50%;
left:0px;
width:100%;
height:1px;
overflow:visible;
visibility:visible;
display:block;
}
 
#position {
margin-left:-475px;
position:absolute;
top:-282px;
left:50%;
width:950px;
height:565px;
visibility:visible;
background-color:#FFFFFF;
}
 


Then the HTML should look like this very simple as you can see to vertically and horizontally align your website using CSS:

 

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CNC Projects</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="wrap">
<div id="position">
<b>This text is in the centre of the page!</b>
</div>
</div>
 
 
</body>
</html>
 

Free Downloads