31 10 / 2011

Bulletproof Vertical and Horizontal Alignment in CSS

Had to attack this problem for a recent project. There’s a couple of extraneous wrappers but it works :)

<!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” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>

<title>untitled</title>

<style type=”text/css”>

html, body { margin:0; height:100%; width:100%; background: #f39}

#outer { display:table; width:100%; height:100%; text-align:center  }

#wrapper { display:table-cell; text-align:center; vertical-align:middle; width:100%  }

#content { background:#fc0; height:100px; width:600px; display:table; margin:0 auto; text-align:center;}

#content span { background:#c65; display:table-cell; width:100%; padding:10px; vertical-align:middle }

</style>

</head>

<body>

<div id=”outer”>

<div id=”wrapper”>

<div id=”content”>

<span>hello</span>

</div>

</div>

</div>

</body>

</html>

Permalink 9 notes