Why is vertical-align: middle not working on my span or div?

Issue

I'm trying to vertically center a span or div element within another div element. However when I put vertical-align: middle, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.

This is what I'm currently doing in my webpage:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/

Solution

This seems to be the best way - some time has passed since my original post and this is what should be done now:

.main {
  display: table;
  
  /* optional css start */
  height: 90px;
  width: 90px;
  /* optional css end */
}
        
.inner {
  border: 1px solid #000000;
  display: table-cell;
  vertical-align: middle;
}

<div class="main">
  <div class="inner"> This </div>
</div>

Answered By - Charles D Pantoga