html - 如何垂直居中一组动画div的起点

Question

我有一个 css 动画，我需要所有动画元素（“索引”类中的所有内容）的初始位置完全垂直居中。我尝试使用其他答案中显示的 flex 方法，但它似乎不起作用。有任何想法吗？这是一个包含所有问题代码的 JS Fiddle：https ://jsfiddle.net/149gwure/2/

#container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

标签： htmlcssflexbox

Answer 1

您可以使用此方法将每个动画div元素与其容器的中心对齐。

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

top: 50%;由于它们的容器/父级是整个窗口，因此它们都将垂直和水平对齐到屏幕的中心left: 50%;

这个答案 解释了为什么它工作得很好

我在您的 JSFiddle 演示中实现了这一点：

JSFiddle 演示