Html CSS Transform 转换到窗口中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16724049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Transform Translate to center of Window
提问by nambrot
I have a list of elements and upon a specific action, i'd like to apply the css-transform translate to move it into the center of the window. I know css-transform is used to relatively move an element, but I was wondering whether it is possible to anchor it absolutely somewhere, i.e. in the middle of the window (lightbox-style). I'm looking at an animation similar to the iPad Music app, where the album cover flips and centers.
我有一个元素列表，在执行特定操作时，我想应用 css-transform translate 以将其移动到窗口的中心。我知道 css-transform 用于相对移动元素，但我想知道是否可以将它绝对锚定在某个地方，即在窗口中间（灯箱样式）。我正在查看类似于 iPad 音乐应用程序的动画，其中专辑封面翻转并居中。
Note: I want to use css-transforms because it avoids reflow of surrounding elements.
注意：我想使用 css-transforms 因为它避免了周围元素的回流。
Nam
南
Edit: I have created a JSfiddle for better illustration: http://jsfiddle.net/bdtZc/, relevant line:
编辑：我创建了一个 JSfiddle 以获得更好的说明：http: //jsfiddle.net/bdtZc/，相关行：
.card:focus {
-webkit-transform: rotateY(180deg);
}
回答by Ryan Rahlf
Update 2017
2017 年更新
Since I just received another upvote for this answer I thought I'd revisit it.
由于我刚刚收到对此答案的另一个赞成票，因此我想我会重新审视它。
With current browsers you should have good luck with the transform(-50%, -50%) technique from other answers but depending on how your content containers are set up that may not result in the center of the window; it may be the center of your container which could be smaller or larger than the window.
使用当前的浏览器，您应该在其他答案中使用 transform(-50%, -50%) 技术祝您好运，但这取决于您的内容容器的设置方式，可能不会导致窗口居中；它可能是您的容器的中心，它可能比窗口小或大。
The latest browsers support viewport units (vh, vw) which would give you exactly what you're looking for as far as viewport centering. Animation from current location to viewport center would be a different issue due to scrolling.
最新的浏览器支持视口单位（vh、vw），它可以为您提供您正在寻找的视口居中。由于滚动，从当前位置到视口中心的动画将是一个不同的问题。
http://caniuse.com/#feat=viewport-unitshttps://developer.mozilla.org/en-US/docs/Web/CSS/length(see vh, vw)
http://caniuse.com/#feat=viewport-units https://developer.mozilla.org/en-US/docs/Web/CSS/length（参见 vh、vw）
Without CSS Transform
没有 CSS 转换
You can accomplish this without using css-transform by using absolute positioning:
通过使用绝对定位，您可以在不使用 css-transform 的情况下完成此操作：
(full code here : http://jsfiddle.net/wkgWg/)
（完整代码在这里：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;
}
With CSS Transform
使用 CSS 转换
If you'd like to continue working with CSS-Transform, you'll need to calculate the "center" or the end location of your transform using JavaScript and then generate and attach a transform statement at runtime. Your origin transform vector would need to be subtracted from the "center to screen" vector.
如果您想继续使用 CSS-Transform，您需要使用 JavaScript 计算转换的“中心”或结束位置，然后在运行时生成并附加转换语句。您的原点变换向量需要从“中心到屏幕”向量中减去。
Here's a javascript version using css-transform (where supported) via the jQuery.transit plugin by Rico Sta. Cruz.
这是通过 Rico Sta的jQuery.transit 插件使用 css-transform（如果支持）的 javascript 版本。克鲁兹。
(Full fiddle here: http://jsfiddle.net/ZqpGL/263/)
（完整的小提琴在这里：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();
});
});
回答by pouncyisdead
An article at CSS-Tricks (http://css-tricks.com/centering-percentage-widthheight-elements/) pointed out that one could use a mixture of absolute positioning and translation, without resorting to the use of JS.
CSS-Tricks ( http://css-tricks.com/centering-percentage-widthheight-elements/) 上的一篇文章指出，可以使用绝对定位和平移的混合，而无需求助于使用 JS。
This helps to limit reflow, and keeps your element centered even during size changes to the element or the screen.
这有助于限制回流，即使在元素或屏幕的大小更改期间也能保持元素居中。
.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%;
}
回答by phreakhead
You can do it in pure CSS now with the vh(view height) unit. It's always relative to the screen size, not the element itself:
您现在可以使用vh(view height) 单位在纯 CSS 中完成此操作。它总是相对于屏幕尺寸，而不是元素本身：
/* position element in middle of screen */
translateY(calc(50vh))
So if you know the height of the element (say height:320px), you can move it exactly to the center of the screen.
因此，如果您知道元素的高度（例如height:320px），您可以将其准确地移动到屏幕的中心。
/* moves the element down exactly off the bottom of the screen */
translateY(calc(50vh - 160px))
回答by apaul
I would recommend looking into a JS solution for this, as this will be problematic for images of different sizes, but since you asked for a CSS solution...
我建议为此寻找一个 JS 解决方案，因为这对于不同大小的图像会有问题，但是由于您要求使用 CSS 解决方案......
You could use keyframe animation for this effect like so: jsFiddle
你可以像这样使用关键帧动画来实现这个效果：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);
}
}
Edit:Here's a roughbetter jQuery version using
编辑：这是一个粗略的更好的 jQuery 版本，使用
position:relative;
position:relative;
$('.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
});
});
