vertical-align

Multiples ways to align vertically a text

by luissanchezm86

HTML

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
</div>

<div style="display: table-cell; vertical-align: middle; width: 200px;
    height: 200px;">I'm in the middle!</div>

<div class="qwe">
    qweqweqwe
</div>

CSS

/* IE 6 and 7 hack */
html* div.qwe{
    display: inline;
}
.qwe {
    width: 200px;
    height: 200px;
    border: #000000 1px solid;
    text-align: center;
    /* firefox 2 */
    /* everybody else */
    display: table-cell;
    vertical-align: middle;  
}
.asd{
    display: table-cell;
    position: relative;
    border: #000000 1px solid;
}
.greenBorder {
    border: 1px solid green;
}