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;
}

还要记得将翻转容器的大小更改为图像的大小，在我的情况下，它是100x100px，所以：

2。设置动画元素的正确大小。

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

3。查看演示。

https://jsfiddle.net/m7wsLsnk/

Answer 2

如果您的项目不需要旧版浏览器后备，最简单，最快捷的方法是使用 Flexbox.

示例代码（您必须应用所有类型的 prefixes 才能在所有浏览器上良好运行）

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.container的位置#websitebackground或翻转元素的父级。

Answer 3

由于你没有提供一个有效的例子我会给它一个很好的猜测。这个hack应该使用类.center-child将容器内的任何元素居中。确保容器只有一个孩子。

更新了HTML

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

其他CSS：

.center-child {
    text-align: center;
    white-space: nowrap;
}

.center-child:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    // Adjusts for spacing
    margin-right: -0.25em;
}

.center-child > * {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    white-space: normal;
}

Answer 4

从我的角度来看，给出的芒果是错误的。 IE 10以及Android浏览器不支持Flexbox，视图宽度和高度也不支持。所以我建议你做以下事情：

<强> HTML

将img包装在容器中：

<div class="img-cont>    
    <img class="logocenter" src="images.svg" />
</div>

<强> CSS

给容器100％的宽度和高度（相对于'img-cont'的容器），并给'img-cont'一个绝对的pos。然后你可以给动画一个0自动保证金。

html, body {
    width: 100%;
    height: 100%;
}

.img-cont {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flip-container {
    margin: 0 auto;
}

还有一些JS

基本上计算页面的高度并将元素放在中心。请记住，你可能想要减去元素的高度，如下所示：'var halfTop =（（site.height - parseInt（$（el）.height（）））/ 2） - 60;' （只是一个例子）

var site = {
    resize: function() {
        // reset height and width
        site.width = parseInt($(window).width());
        site.height = parseInt($(window).height());

        $('.img-cont').each(function() {
            var el = $(this);

            var halfTop = ((site.height - parseInt($(el).height())) / 2);
            $(el).css('top' + halfTop + 'px');
        });

};

$(window).resize(function() {
    site.resize();
});

垂直和中心div水平而不搞乱div动画？

4 个答案:

1。使用Flexbox进行中心。

2。设置动画元素的正确大小。

3。查看演示。