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/

将容器垂直居中

1 个答案: