动画 CSS 取消居中 Div

Question

我有一个 div 位于屏幕中央，但动画 CSS 一直使它不居中。在此片段中，div 居中，直到我添加动画类。我该如何解决这个问题，使其在保留动画的同时保持在中心？

#main {
  font-size: 48px;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" />

<div id="main" class="animate__animated animate__backInDown">
      Hello There
</div>

Answer 1

您应该将内容包装在 div 内。

#main {
  font-size: 48px;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" />
    
    <div id="main">
      <div class="animate__animated animate__backInDown">Hello There</div>
    </div>

动画 CSS 取消居中 Div

Animate CSS Uncentering Div

html

css

animate.css