在具有视口高度的父级内部垂直居中 div

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

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 2

你可以使用这个

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

}

Answer 3

我刚刚编辑了上面的代码。

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

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

Answer 4

简单绝对定位。

JSfiddle Demo

.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 */

}

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

或Flexbox

JSfiddle Demo

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

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

显然在某些时候 300px 可能比您指定的视口更大（如 SO 片段中所示），因此您可能需要在此之前进行调整。

在具有视口高度的父级内部垂直居中 div

Vertically centering div inside parent with viewport height

html

css

viewport