如何添加从顶部淡入我的内容的居中 div？答案

【问题标题】：How to add a centered div that fades-in from the top over my content?如何添加从顶部淡入我的内容的居中 div？
【发布时间】：2026-02-09 06:00:01
【问题描述】：

这是我的基本 HTML 结构：

<body>
    <div class="fadeInDown">
        I want this to appear centered, from the top and over all my content
    </div>

    <div id='content'>
        ...much complex html layout...bootstrap...wow
    </div>
</body>

我希望我的 fadeInDown div 看起来像这样：https://fabriceleven.com/dev/quickly-add-css-fade-in-animations/（“Going down”示例）

如何实现将 div 置于顶部和其他所有内容的中心？

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
在发布之前我尝试了很多...谢谢@Paulie_D :(
...你试过什么？我们不是介意读者。您需要展示您的研究成果，这样我们就不会浪费或重复您已经拒绝的内容。

标签： html css animation

【解决方案1】：

它向您展示了如何在您包含的链接中实现这一目标

.on-top {
  position: absolute;
  width: 100%;
  text-align: center;
}
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

<body>
  <div class="on-top animate fadeInDown">
    I want this to appear centered, from the top and over all my content
  </div>

  <div id='content'>
    ...much complex html layout...bootstrap...wow
  </div>
</body>

【讨论】：

谢谢，但是渐变的 div 仍然会出现在画布上，我希望它出现在内容文本上，而不是上面
哦，谢谢！我错过了绝对位置的东西>_