Вертикальное центрирование контейнера

Question

В настоящее время я работаю над своим портфолио и пытаюсь расположить мои секции вертикально по центру и сделать их отзывчивыми.Но ничего не работает, я могу расположить их горизонтально, но когда я пытаюсь использовать позиции: относительные и верхние: 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>

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

Странная вещь заключается в том, что в Codenpen это работаетотлично ... но в JSFiddle, где весь мой проект .. он не работает ..

Ссылки:

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

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

Answer 1

Вам нужно иметь высоту #intro-cont и position: relative;, чтобы это работало.Смотрите эту скрипку: https://jsfiddle.net/u85ekcg0/