Vertically centering a container

Question

I'm working on my portfolio currently, and trying to vertically center my sections and make them responsive. But nothing works, I can center them horizontally but when I try to use position: relative and top: 50%.. Nothing happens. I'm going to put my code and my codepen here.

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>

css:

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

The weird thing is that in Codenpen it works perfectly.. but in JSFiddle, where my whole project is.. it doesn' work..

Links:

Codepen: https://codepen.io/Sarithan/pen/eLXzva

JSFiddle: https://jsfiddle.net/Sarithan/pgjehwbv/

Answer 1

You need to have the height on #intro-cont and a position: relative; for this to work. See this fiddle: https://jsfiddle.net/u85ekcg0/