Vertical align anything with just 3 lines of CSS

.element { position: relative; top: 50%; transform: translateY(-50%); } Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box. .element { position: relative; width: 400px; left: 50%; margin-left: […]


Transforming elements via Javascript in all browsers at once can be a real pain in the ass (think vendor prefixes). Enter TranformJS: 2D and 3D transforms as regular CSS properties you can set using .css() and animate using .animate() In code that basically means you can now use this: $(‘#test’).animate({ translateY:’+=150′, scale:’+=2′, rotateY: ‘+=’+(2*Math.PI), rotateX: […]