Convert CSS Translate to center of window

Question

I have a list of elements, and after a certain action I would like to apply the css-transform translation to move it to the center of the window. I know that css-transform is used for relative movement of an element, but I was wondering if it can be attached absolutely anywhere, that is, in the middle of the window (in the style of a light box). I look at an animation similar to the iPad Music app, where the album art is flipped and centered.

Note: I want to use css-transforms because this avoids the rearrangement of surrounding elements.

Nam

Change: I created JSfiddle for a better illustration: http://jsfiddle.net/bdtZc/ , corresponding line:

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

Answer 1

Update 2017

Since I just received another answer to this answer, I decided to return to it.

In modern browsers, you are lucky with the conversion technique (-50%, -50%) from other answers, but depending on how your content containers are configured, which may not lead to the center of the window; it may be the center of your container, which may be smaller or larger than the window.

Recent browsers support view units (vh, vw) that will give you exactly what you are looking for, before centering the viewport. Animation from the current location to the center of the viewport would be another problem due to scrolling.

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

No CSS Transformation

You can do this without using css-transform using absolute positioning:

(full code here: 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; } 

Using CSS Transform

If you want to continue working with the CSS transform, you need to calculate the "center" or final location of the transform using JavaScript, and then generate and attach the transform operator at run time. Your original transform vector must be subtracted from the center-to-screen vector.

Here's a javascript version using css-transform (where supported) through the jQuery.transit plugin from Rico Sta. Cruz .

(Full fiddle here: 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

An article in CSS-Tricks ( http://css-tricks.com/centering-percentage-widthheight-elements/ ) indicated that you can use a mixture of absolute positioning and translation without resorting to using JS.

This helps limit payment and keeps the item centered even when the item or screen is resized.

 .center { position: absolute; left: 50%; top: 50%; /* Nope =( margin-left: -25%; margin-top: -25%; */ /* Yep! */ transform: translate(-50%, -50%); /* Not even necessary really. eg Height could be left out! */ width: 40%; height: 50%; } 

Answer 3

Now you can do this in pure CSS using the vh block (view height). This is always relative to the screen size, and not the element itself:

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

 /* moves the element down exactly off the bottom of the screen */ translateY(calc(50vh - 160px)) 

Answer 4

I would recommend looking at the JS solution for this, as that would be problematic for images of different sizes, but since you asked for a CSS solution ...

You can use keyframe animation for this effect as follows: 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 rough, improved version of jQuery using

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