CSS Forum

**beta** · 02-20-2006, 04:22 AM

Im trying to find a pure CSS method to vertically align a div, I have seen the way to do it with a table and a little bit of style but i was wondering if anyone has a way just with CSS positioning?

**beta** · 02-20-2006, 04:27 AM

Ah, well i have found one solution, i havnt fully tested it yet but is seems ok

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Hor & Vert Center</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style title="Default" media="screen" type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>
<body>

<div id="center">
Your centered box.
</div>

</body>
</html>

**chrishirst** · 02-20-2006, 04:51 AM

you can use vertical-align or set the top margins

**beta** · 02-20-2006, 02:24 PM

I tried that, i think it only works with inline elements, i could be wrong but it didnt seem to work for me.