Question

我刚刚开始学习响应式网页设计。在我的情况下，我需要rake routes在任何类型的移动设备中位于屏幕的中心。我设法水平居中，但垂直位置不能居中。是否可以垂直居中div？

这些是我的代码：

CSS

<wrapper>

HTML 的

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

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

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

3 个答案: