html - 垂直和水平居中 div 而不会弄乱 div 动画？

Question

我知道这个问题已经在其他线程中讨论过了。但是，我还没有找到解决问题的有效解决方案，我遇到的问题有点不同(也许，如果我弄错了，抱歉，我还是 CSS 的大三学生)。

所以，我试图制作一个虚拟网站，当您将鼠标悬停在中心的图像上时，它会水平翻转并显示内容。

FLIP 动画感谢 David Walsh:https://davidwalsh.name/css-flip

HTML代码:

<div id="websitebackground">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper" >
            <div class="front" >
                <!-- front content --> 
               <img class="logocenter" src="images.svg" />
            </div>
            <div class="back">
                <!-- back content -->
            </div>
        </div>
    </div>
</div>

CSS 代码:

#websitebackground
{
    min-height: 100vh; 
    min-width: 100vw;
    background-color: #34495e;
}

.logocenter {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*the rest flip animation is the same*/

如何将 div 移到中间？水平，垂直和响应，也不会弄乱动画。

我设法使 div 居中。然而，动画是一团糟。翻转位置不在应有的位置。无论翻转与否，我都希望图像保持这样的位置:

http://www.corelangs.com/css/box/img/div-vertical-center.png

提前谢谢你。

Answer 1

首先 - 在 CSS 中居中是棘手的， learn here how to do it properly .

在您的情况下，我会使用 Flexbox 方法，因此:

1。以 Flexbox 居中。

#websitebackground
{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 100vh; 
    min-width: 100vw;
    background-color: #34495e;
}

还要记住将翻转容器的大小更改为图像的大小，在我的例子中是 100x100 像素，所以:

2。设置动画元素的适当大小。

.flip-container, .front, .back {
    width: 100px;
    height: 100px;
}

3。查看演示。

https://jsfiddle.net/m7wsLsnk/