css - Method for full-screen vertically-centered HTML page? -


i'm looking valid cross-browser solution html page which:

  1. consumes 100% of screen height, no overflow (i.e. no scrolling)
  2. has vertically (and horizontally) centered <div> hold main content

i know vertical centering possible when wrapping container has static height. adjusting height browser window height feasable? (preferably, no js should used.)

depends on mean "cross browser". following works fine current, standards compatible ones (thus not ie6):

html:

<div id="a">     <div id="b">         <div id="content"></div>     </div> </div> 

css:

html, body, #a {     margin: 0;     padding: 0;     height: 100%;     width: 100%; }  #a {     display: table; }  #b {     display: table-cell;     margin: 0;     padding: 0;      text-align: center;     vertical-align: middle; }  #content {     border: 5px solid red;     width: 100px;     height: 100px;     margin: auto; } 

live example:

http://jsfiddle.net/mgpmr/1/


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -