CSS变换平移到窗口中心

Question

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

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

名称

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

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

Answer 1

更新2017

因为我刚刚收到了对这个答案的又一次赞成票，所以我想我应该重新考虑一下。

在当前的浏览器中，您应该能够很好地使用来自其他答案的转换(-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计算转换的“中心”或结束位置，然后在运行时生成并附加transform语句。你的原始变换矢量需要从“中心到屏幕”矢量中减去。

这是一个通过jQuery.transit plugin by Rico Sta. Cruz使用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();
    });

});

Answer 2

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

Answer 3

你现在可以在纯CSS中使用vh (视图高度)单位。它总是与屏幕大小相关，而不是元素本身：

/* 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))