Vertical and Horizontal align-center

CSS and 3 div's to vertically align center some content...wow

HTML

<div id="outer">
    <div id="middle">
      <div class="greenBorder" id="inner">
          any text<br/>
          any height<br/>
          any content, for example generated from DB<br/>
          everything is vertically centered
      </div>
    </div>
  </div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
    overflow:hidden
}
#outer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#outer[id] {
    display: table;
    position: static;
}
#middle {
    position: absolute;
    top: 10%;
} /* for quirk explorer only*/
#middle[id] {
    display: table-cell;
    vertical-align: top;
    width: 20%;
    position: static;
}
#inner {
    width:50%;
    max-width: 500px; /* a little fun with different sized browsers */
    min-width: 200px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    top: 10%
} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
.greenBorder {border: 1px solid green;} /* just borders to see it */

JavaScript

// Source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html