CSS to vertically align text to middle of div

Question

What is the correct way to force text in a div to vertically align to the middle? I have found a couple \'tricks\', but I need something that works with a single line and multip

Answer 1

Try this, it will work.

    

         

             

             Your Text Here
             
         
    

Css Class

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }