应用animate.css之前的中心元素

Question

我有一个宽度已知但高度未知的div（高度：自动）。

它需要进行动画处理，然后在浏览器中垂直和水平居中。它的父母就是身体。

我正在使用animate.css CSS库执行动画。

如果我使用平移将div居中，则动画将div向下和向右偏移，然后在动画完成后，将其“快照”回屏幕中心。

我猜这与翻译有些冲突？

任何想法都将不胜感激。

Answer 1

如果您将图层设置为绝对位置并播放像这样的平移，则可以执行此操作

HTML

<div class="container-layer">
  <div class="layer">
    Lorem ipsum dolor sit amet
  </div>
</div>

CSS

.container-layer {
    position:relative;
    height:100vh;
    width:100vw;
    display:block;
    }
.layer{
  -webkit-animation: animation 2s linear;
    margin: 0;
    max-width:90px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }

@keyframes animation {
   0% {
    transform: translate(200%, 200%)
   }

   100% {
    transform: translate(-50%, -50%)
   }
}

https://jsfiddle.net/MAXXALANDER/rjmfbyg9/2/

您正在使用动画库，但我认为它的作用相同