JQuery: zoom text on hover

Question

I want to zoom/unzoom a text with animate. The problem is that the text is absolutely positioned inside a relative div and when I animate the font-size the text expands only to the right and bottom. I want it to expand/retract to all sides equally.

Prepared example: http://jsbin.com/welcome/48103/edit

Answer 1

Animate using the CSS transition property:

.zoom {
  display: inline-block; /* this is needed for inline elements */
  transition: transform 0.3s ease-in-out;
}

.zoom:hover {
  transform: scale(1.4);
}

<a class="zoom" href='#'>Hover me!</a>

Answer 2

The align in horizontal center is easy. Just add text-align: center and it will work. But if you want to align it in middle, you need to use display: table, because "only" td is "allowed" to set vertical-align: middle. So you have to build a div-table layout around: http://jsbin.com/welcome/48145/edit