CSS 定位和对齐

Question

我正在一个网站上工作，我希望文本位于页面中心（不可滚动页面）。我在中心有容器 div，但无法让文本位于中心。 h1 具有 position: fixed 很重要，因为我计划拥有它们的动画。 This is what I created previously 请观看视频以了解我在这里尝试实现的目标（或以前实现的目标）。
但它不是响应式设计，所以开始改变它。在此处查看代码： jsFiddle

如果在没有h1{position:fixed} 的情况下还有其他实现动画的方法，欢迎使用该解决方案。

P.s 我尝试在 <span> 和 JavaScript+jQuery 的帮助下获得效果，但对结果并不满意。

谢谢！

如果您看到代码有两个 h1 标签，现在当页面加载时，我希望第一个 h1 标签的内容到 fadeInDown 并在延迟 2s 到 fadeOutDown 之后（使用animate.css 用于此目的）如果我不在我的 h1 标签上使用 position:fixed，每个 h1 的内容会相互堆叠，这是我不想要的。

你可以查看 jsFiddle，我已经用动画更新了它。

body {
  overflow: hidden
}

.content {
  height: 50vh;
  width: 80%;
  color: #ff7100;
  width: 80%;
  margin: 0 auto;
  text-align: center;
	
}

h1 {
position:fixed;
  /* try commenting this to see how it affects the animation (effect is not the one desired)*/
  opacity: 0
}

.main .content h1 {
	
  animation: fadeInDown, fadeOutDown;
  animation-duration: 1s, 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards, forwards;
  animation-timing-function: ease-in, linear;
}

.main .content h1:nth-child(1) {
  /* margin-left: 35%; */
  -webkit-animation-delay: 2s, 4s;
  animation-delay: 2s, 4s;
}

.main .content h1:nth-child(2) {
  /* margin-left: 35%; */
  -webkit-animation-delay: 4.5s, 6s;
  animation-delay: 4.5s, 6;
}

.main .content h1:nth-child(3) {
  /* margin-left: 30%; */
  -webkit-animation-delay: 15.5s, 18s;
  animation-delay: 15.5s, 18s;
}

.main .content h1:nth-child(4) {
  /* margin-left: 28%; */
  animation: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  -webkit-animation-delay: 18.5s;
  animation-delay: 18.5s;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

<div class="container-fluid main" style="border:10px solid red;">
<p> I need the 'Websites' and 'Development' in the center of the column. At the moment .text-center doesn't work 
  <div style="border:10px solid purple;width:80%;margin:15% auto ">
    <div class="content row">
      <div class="col text-center" style="border:10px solid black;">
        <h1>Websites</h1>
        <h1>Development</h1>
      </div>
    </div>

  </div>

</div>

重复我在这里的ISSUE是我无法在列的中心找到h1。

Answer 1

如果您的页面与正文大小相同，则添加到 h1

transform:translate(-50%,-50%);
top:50%;
left:50%;

可能就够了 我也很好奇为什么在你的情况下你不能用绝对替换固定，因为如果你使用固定元素，将容器居中是没有用的。

Answer 2

这应该使您的固定h1 相对于页面居中。此外，为父元素定义 position: relative 可能有助于理解使用 position: absolute 作为子元素的 h1 元素的上下文

h1 {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
}