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

【问题标题】：vertical centering of a div in responsive design响应式设计中 div 的垂直居中
【发布时间】：2015-06-02 04:23:24
【问题描述】：

我刚刚开始学习响应式网页设计。在我的情况下，我有一个<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>

【问题讨论】：

标签： html css servlets media-queries

【解决方案1】：

应用这种风格：

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

【讨论】：

【解决方案2】：

嘿，在@media () 试试下面的代码

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

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

祝你好运

【讨论】：

【解决方案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;
}

【讨论】：