垂直居中的代码

#outer {height: 600px; overflow: visible;width: 100%;position: relative;border:1px solid green;} /* or without overflow */
        #outer[id] {display: table; position: static;}
        #middle {position: absolute; top: 50%;} /* for explorer only*/
        #middle[id] {display: table-cell; vertical-align: middle; width: 100%;position:static;}
        #inner {position: relative; top: -50%} /* for explorer only */
        /* optional: #inner[id] {position: static;} */

 

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