Javascript 容器垂直居中

我目前正在处理我的投资组合，并试图将我的部分垂直居中，使其具有响应性。但没有什么效果，我可以水平居中，但当我尝试使用位置：相对和顶部：50%。。什么也没发生。我要把我的代码和我的代码笔放在这里

HTML:

<section id="intro">
        <div class="row">
          <div class="col-12">
            <div id="intro-cont">
              <h1>
                I'm Peter, an upcoming Front-End Developer, gamer and lo-fi lover.
              </h1>
              <a class="animated infinite bounce delay-10s" id="more" href="#about">More<br><i class="arrow down"></i></a>
            </div>
          </div>
        </div>
      </section>

奇怪的是，在Codenpen中，它工作得非常完美。。但是在我的整个项目所在的JSFIDLE。。它不起作用

链接：

代码笔：

---

jsidle:

您需要在intro cont上有高度和位置：relative；为了让它发挥作用。

---

看到这把小提琴了吗：

嗯，即使是在JSFIDDLE中，我也觉得它居中得很得体。我正试着垂直居中。你能告诉我如何居中整个cont吗？位置：绝对是最好的方法吗？坦率地说，位置绝对不是使事物居中的最好方法，你可以看看使用并希望它能有所帮助：嗯，最后一个问题，高度：100vh，使截面具有一定高度的最佳方法吗？高度：100vh将高度设置为视口高度的100%，

/*** Intro ***/

#intro{
  height: 90vh;
}

#intro-cont{
    text-align: center;
  positio
}

#intro-cont h1 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 30px;
  position: absolute;
  top: 30%;
  right: 0;
  left:0;
}

#intro-cont i {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin-bottom: 10px;
}

#intro-cont .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#intro-cont a {
  font-family: 'Gloria Hallelujah', cursive;
  text-decoration: none;
  color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}