Vertical-align middle workaround in IE

I've tried various different ways to get this working. The code below is the closest I've come to vertically-aligning an element to the centre, without using tables. Sadly this only works in FF. Any ideas on how to vertically align an object/element cross-browser, successfully? I would like to stay away from using negative margins and/ display: table and/ display: table-cell.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#header {width: 800px; height: 100px; position: relative; border: 1px solid red;}
#header-small {width: 500px; height: 50px; position: absolute; top: 0; bottom: 0; margin: auto; border: 1px solid blue;}
</style>
</head>
<body>
<div id="header">
<div id="header-small">
</div>
</div>
</body></html>

Notes
1) header-small should support different size objects/elements.
2) Removing <?xml version="1.0" encoding="iso-8859-1"?> does not fix this in IE.
3) Doctype cannot be changed.

Vertical-align middle workaround in IE

SilverLining

Receptional Andy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week