Question

所以我有100vh - 55px高度的div，我有一个div，我想在父母的内部垂直居中，无论如何。我将如何继续这样做？这就是我现在所拥有的：

/* home.css | By Seb R | Ekchö */

.lander {
  height: calc(100vh - 55px);
  background: blue;
  overflow: hidden;
}
.lander .content {
  height: 300px;
  margin-top 30vh;
  background: red;
}

<div class="lander">
  <div class="content"></div>
</div>

我做错了什么？

Answer 1

简单的绝对定位。

JSfiddle Demo

＆＃13;

.lander {

  height: calc(100vh - 55px);
  background: blue;
  overflow: hidden;
  position: relative;

}

.lander .content {

  height: 300px;
  background: red;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: -150px;  /* half height */

}

＆＃13;

<div class="lander">
  <div class="content"></div>
</div>

＆＃13;

或 Flexbox

JSfiddle Demo

＆＃13;

.lander {
    height: calc(100vh - 55px);
    background: blue;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.lander .content {
    height: 300px;
    background: red;
}

＆＃13;

<div class="lander">
    <div class="content"></div>
</div>

＆＃13;

显然，在某些时候300px可能会更大你指定的视口（如在SO片段中），所以你可能需要在发生这种情况之前进行调整。

Answer 2

我刚编辑了上面的代码。

.lander .content {
  height: 30vh;
  top: calc((100vh - 30vh) / 2);
  background: red;
  position: relative;
}

您正在使用px作为高度，因此css将其读作静态大小。

Answer 3

:

中缺少margin-top 30vh;

/* home.css | By Seb R | Ekchö */

.lander {
  height: calc(100vh - 0px);
  background: blue;
  overflow: hidden;
}
.lander .content {
  height: 300px;
  margin-top: 30vh;
  background: red;
}

<div class="lander">
  <div class="content"></div>
</div>

Answer 4

您可以使用此

.lander .content {
background: red none repeat scroll 0 0;
height: 300px;
position: relative;
top: calc((100vh - 300px) / 2);
z-index: 9;

}

或

.lander .content {
background: red none repeat scroll 0 0;
height: 300px;
margin-top: calc((100vh - 300px) / 2);
z-index: 9;

}

使用视口高度在父级内垂直居中div

4 个答案: