vertical centering of a div in responsive design

Question

I'm just starting to study responsive web designing. In my situation, I have a <wrapper> that is needed to be in the center of the screen in any kind of mobile device. I have managed to center it horizontally, but the vertical position can't be centered. Is it possible to center a div vertically?

These are my codes:

CSS

@media (max-width: 480px) and (min-width: 320px) {
    #wrapper{
        top: 10%;
        left: 5%;
        padding-bottom: 3%;
        position: relative;
        width: 90%;
    }

HTML

<div id="wrapper">
    <div id="box">
        <hr>
        <h2> O N L I N E<br>R E S U M E</h2>
        <hr>
        <p><b>Sample</b></p>
        <p>Sample</p>
        <p>E-mail Address: <a href="mailto:">sample@yahoo.com.ph</a></p>
    </div>
    <div id="navi">
    <center>
        <a class="link" id="resume" href="Resume.html">R E S U M E</a> 
        <a class="link" id="port" href="#">P O R T F O L I O</a> 
        <a class="link" id="contact" href="Contact.html">C O N T A C T</a> 
    </center>
    </div>
</div>

Answer 1

Apply this style:

div.center{
   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

Answer 2

Hey try with below code at @media ()

 /* Parent */   
 body {
     position: absolute;
     display: table;
     width: 100%;
     height:100%;
 }

 /* Child */
 #wrapper {
     display: table-cell;
     vertical-align: middle;
 }

Good Luck

Answer 3

HTML

<div>
  testing!
</div>

CSS

div{
  background: #222;
  color:#FFF; 
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}