14

我有一个元素列表，并且在执行特定操作时，我想应用 css-transform translate 将其移动到窗口的中心。我知道 css-transform 用于相对移动一个元素，但我想知道是否可以将它绝对锚定在某个地方，即在窗口中间（灯箱样式）。我正在看一个类似于 iPad 音乐应用程序的动画，其中专辑封面翻转和居中。

注意：我想使用 css-transforms 因为它避免了周围元素的回流。

南

编辑：为了更好的说明，我创建了一个 JSfiddle：http: //jsfiddle.net/bdtZc/，相关行：

.card:focus {
   -webkit-transform: rotateY(180deg);
}
4

4 回答 4

18

2017 年更新

由于我刚刚收到了对该答案的另一个赞成票，我想我会重新审视它。

对于当前的浏览器，您应该对其他答案中的 transform(-50%, -50%) 技术有好运，但这取决于您的内容容器的设置方式，可能不会导致窗口居中；它可能是容器的中心，可能比窗口小或大。

最新的浏览器支持视口单位（vh、vw），这将准确地为您提供您正在寻找的视口居中。由于滚动，从当前位置到视口中心的动画将是一个不同的问题。

http://caniuse.com/#feat=viewport-units https://developer.mozilla.org/en-US/docs/Web/CSS/length（见 vh, vw）

没有 CSS 转换

您可以通过使用绝对定位在不使用 css-transform 的情况下完成此操作：

（这里的完整代码：http: //jsfiddle.net/wkgWg/）

.posDiv
{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    border:1px solid red;

    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

.triggerElement:hover .posDiv
{
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;

    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

使用 CSS 变换

如果您想继续使用 CSS-Transform，您需要使用 JavaScript 计算转换的“中心”或结束位置，然后在运行时生成并附加一个转换语句。您的原点变换向量需要从“中心到屏幕”向量中减去。

这是通过 Rico Sta 的 jQuery.transit 插件使用 css-transform（在支持的情况下）的 javascript 版本。克鲁兹。

（这里的完整小提琴：http: //jsfiddle.net/ZqpGL/263/）

$(function() {
    var $cards = $('.card');
    var cardInFocus = null;


    $cards.each(function(index, elem) {
        var $elem = $(elem);
        var pos = $elem.position();
        $(elem).data('orig-x', pos.left);
        $(elem).data('orig-y', pos.top);
    });

    var reset = function() {
        if (cardInFocus) {
            $(cardInFocus).transition({
                x: 0,
                y: 0
            });
        }
    };

    $cards.on('focus', function(e) {
        reset();
        cardInFocus = this;
        var $doc = $(document);
        var centerX = $doc.width() / 2;
        var centerY = $doc.height() / 2;
        var $card = $(this);
        var origX = $card.data('orig-x');
        var origY = $card.data('orig-y');
        $(this).transition({
            x: centerX - origX,
            y: centerY - origY
        });
    });

    $cards.on('blur', function(e) {
        reset();
    });

});
于 2013-05-23T21:56:55.260 回答
11

CSS-Tricks 上的一篇文章 ( http://css-tricks.com/centering-percentage-widthheight-elements/ ) 指出，可以混合使用绝对定位和平移，而无需借助 JS。

这有助于限制回流，即使在元素或屏幕大小发生变化时也能保持元素居中。

.center {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    Nope =(
    margin-left: -25%;
    margin-top: -25%;
    */

    /* 
    Yep!
    */
    transform: translate(-50%, -50%);

    /*
    Not even necessary really. 
    e.g. Height could be left out!
    */
    width: 40%;
    height: 50%;
}
于 2014-03-06T19:28:18.860 回答
9

您现在可以使用vh(view height) 单位在纯 CSS 中执行此操作。它总是相对于屏幕大小，而不是元素本身：

/* position element in middle of screen */
translateY(calc(50vh))

因此，如果您知道元素的高度（例如height:320px），您可以将其精确地移动到屏幕的中心。

/* moves the element down exactly off the bottom of the screen */
translateY(calc(50vh - 160px))
于 2015-10-28T04:52:59.300 回答
0

我建议为此研究一个 JS 解决方案，因为这对于不同大小的图像会有问题，但是既然你要求一个 CSS 解决方案......

您可以像这样使用关键帧动画来实现这种效果：jsFiddle

.card:focus {
    transition:all 2s;
    position: absolute;
    animation: center 3s forwards;
}

@keyframes center {
    0% {
        top:0%;
        left:0%;
    }
    100% {
        top:45%;
        left:45%;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

编辑： 这是一个粗略的更好的 jQuery 版本，使用

position:relative;

jsFiddle 

$('.card').focusin(function () {
    var tc = $(window).height() / 2 - $('.card').height() / 2;
    var lc = $(window).width() / 2 - $('.card').width() / 2 - $(this).offset().left;

    $(this).animate({
        left: lc,
        top: tc
    });
});

$('.card').focusout(function () {
    $(this).animate({
        top: 0,
        left: 0
    });
});
于 2013-05-23T23:02:31.277 回答