Centered Box HTML and CSS
// HTML for web page with the content centered both vertically and horizontally
1 2 <html> 3 <head> 4 <title>Centered HTML w/ CSS</title> 5 <style type="text/css" media="screen"> 6 body, html { height: 100%; background-color:#000; } 7 #outer { height: 100%; width: 100%; overflow: visible; position: relative; } 8 #outer[id] { display: table; position: static; } 9 #middle { position: absolute; top: 50%; } 10 #middle[id] { display: table-cell; vertical-align: middle; position: static; } 11 #inner { position: relative; top: -50%; text-align: center; } 12 #inner[id] { position: static; text-align: center; } 13 </style> 14 </head> 15 <body> 16 <div id="outer"> 17 <div id="middle"> 18 <div id="inner"> 19 This is the content 20 </div> 21 </div> 22 </div> 23 </body> 24 </html>
