Printable View
Hello-
I am trying put content in the exact middle of a page....I am using CSS, and I have figured out how to center things horizontaly, but I have no idea how to center them vertically....I was thinking that I could do this if I knew how find the height of a browser window, but I don't how to do that either. Does anyone have any ideas?
Thanks.
I know it's incorrect, but I usually create a table and set height/width to 100%. Then you can use vertical align and text-align to set the position.
Code:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Centered Text</title>
<style type="text/css">
<!--
table {border:0px; width:100%; height:100%;}
td {text-align:center; vertical-align:middle;}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Centered Text</td>
</tr>
</table>
</body>
</html>
If you're going to do that you could really just use a DIV or other block element with it's height set to 100% couldn't you? Don't know if it's a bit buggy withs DIV or something, you'll have to try.
The other thing you could if you don't want to use vertical-align is use absolute positioning:
If you want it to still be relative to the page, just encase it in another relatively positioned div:Code:<div style="position: absolute; top: 50%;">Blah</div>
Don't know how well that works either :DCode:<div style="position: relative;">
<div style="position: absolute; top: 50%;">Blah</div>
</div>
Thanks for your help