HTML alignés vert. hauteur flottante dans flottante + centré horiz.

by jeum

HTML

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

CSS

.greenBorder{
    border: 1px solid green;
}

body, html {height: 100%;}

#outer{
    display: table;
    width: 100%;
    height: 100%;
    #position: relative;
    overflow: visible; /* or without overflow */
}

#middle{
    #position: absolute;
    width: 100%;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#inner{
    #position: relative;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    #top: -50%;
}

JavaScript

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