First, let's design the XHTML. This will be very simple:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering Example</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="centerme">
This text will be centered on the page.
</div>
</body>
</html>
Now we need to work on the CSS, which will actually center the div element we just created.<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering Example</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="centerme">
This text will be centered on the page.
</div>
</body>
</html>
You can see that we linked to the stylesheet style.css in our XHTML file. Create that file:
CODE
.centerme {
border: 1px dashed #CCCCCC;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Now that you look at the CSS code, you can realize how simple this actually is. We define a height and width, and position it 50% from the left, and 50% from the top. However, just doing that would make the element start at 50% of the page. We need to make it already halfway there once it is at 50%. So, to do that, we give the element a negative top and left margin of half its size.border: 1px dashed #CCCCCC;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
There you go! Your element should be positioned perfectly in the center of the page. And we did it all within the restrictions of XHTML Strict!