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 multiple lines. Hopefully I am missing something stupid simple:

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>

Answer 1

Change display: inline-block; to display: table-cell;

Answer 2

If your multi-line elements need to wrap for responsive reasons, then your best bet is with Flexbox. Due to the flakiness of Firefox's 2009 Flexbox implementation, it has to be handled slightly differently than you would do it for modern Flexbox implementations.

http://codepen.io/cimmanon/pen/mxuFa

<ul>
  <li>One lorem ipsum dolor sit amet</li><!--
  --><li>Two</li><!--
  --><li>Three</li><!--
  --><li>Four</li><!--
  --><li>Five</li>
</ul>

li {
  text-align: center;
  vertical-align: middle;
  /* fallback for non-Flexbox browsers */
  display: inline-block;
  /* Flexbox browsers */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}

Answer 3

I've made a quick example for you, using display: table-cell property on the parent div.

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML: <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

Answer 4

Try this, it will work.

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

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%;
    }

Answer 5

http://jsfiddle.net/DawFy/16/

.header {

display: block;    
text-align: center;
    width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;


}
li
 {
list-style-type:none;

 }

<div >
<li>
<div class="header">test1 </div>
<li>
    <div class="header">some text that will wrap</div>
<li>
    <div class="header">test3</div>

Try this dont know if its "correct" but works

Answer 6

Most of these solutions wouldn't work for me because either the height was manually specified (which I couldn't do) or things like inline-block and float would remove the ability for the an inner div to inherit the parent div's height. I ended up creating a table with two columns each containing my divs and then I had no issues vertically centering text.