Centered Box HTML and CSS
// HTML for web page with the content centered both vertically and horizontally
<html> <head> <title>Centered HTML w/ CSS</title> <style type="text/css" media="screen"> body, html { height: 100%; background-color:#000; } #outer { height: 100%; width: 100%; overflow: visible; position: relative; } #outer[id] { display: table; position: static; } #middle { position: absolute; top: 50%; } #middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { position: relative; top: -50%; text-align: center; } #inner[id] { position: static; text-align: center; } </style> </head> <body> <div id="outer"> <div id="middle"> <div id="inner"> This is the content </div> </div> </div> </body> </html>
