响应式设计中div的垂直居中

Question

我刚刚开始研究响应式web设计。在我的情况下，我有一个<wrapper>需要在任何类型的移动设备的屏幕中心。我设法水平居中，但垂直位置不能居中。是否可以垂直居中div？

这是我的代码：

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

应用该样式：

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

Answer 2

嘿与下面的代码尝试@media（）

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

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

好运

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