html - CSS vertical-align: middle not working -

i'm trying vertically center span or div element within div element. when put vertical-align: middle, nothing happens. i've tried changing display properties of both elements, , nothing seems work.

this i'm doing in 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">      box should centered in larger box      <div class="second">another box in here</div>    </div>  </div>

here jsfiddle of implementation showing doesn't work: http://jsfiddle.net/gzxwc/

this seems best way - time has passed since original post , should done now: http://jsfiddle.net/m3ykdyds/200

/* css file */  .main {     display: table; }  .inner {     border: 1px solid #000000;     display: table-cell;     vertical-align: middle; }  /* html file */ <div class="main">     <div class="inner"> </div> </div> 

you can use following:

using css3:

<!-- html --> <div class="wrapper">    <div>hi</div> </div>  /* css */ .wrapper {   display : flex;   align-items : center; }