AngularJS 1.2.x

var app = angular.module('plunker', []);

app.directive('verticallyCenteredElement', function() {
  function getElementCenteredVerticalPosition(element) {
    var y1 = $(window).height(),
        y2 = element.outerHeight();

    return (y1 / 2) - (y2 / 2);
  }

  function animateToCenteredVerticalPosition(element, timer) {
    var topPos = getElementCenteredVerticalPosition(element);

    element.css('position', 'absolute');

    if (timer && timer > 0) {
      element.stop().animate({
        top: topPos
      }, timer, function() {
        //end of animation
      });
    } else {
      element.css('top', topPos);
    }
  }

  function setElementCenteredVerticalPosition(scope, element, timer) {
    animateToCenteredVerticalPosition(element, timer);

    $(window).on('resize', function() {
      animateToCenteredVerticalPosition(element, timer);
    });

    //unbind events
    scope.$on('$destroy', function() {
      $(window).off('resize', animateToCenteredVerticalPosition);
    });
  }

  return {
    restrict: 'AE',
    scope: {
      timer: '@centeringAnimation'
    },
    link: function(scope, element, attrs) {
      var timer = scope.timer || 0;

      setElementCenteredVerticalPosition(scope, element, timer);
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta name="description" content="AngularJS directive to vertically center targeted element">
  <meta name="keywords" content="AngularJS, directive, centering, vertical">
  <meta name="author" content="Alexandru Costin Dumitru (AlexCD)">
  <meta charset="utf-8" />
  <title>AngularJS Vertically Centered Element</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
  <script src="app.js"></script>
</head>

<body>

  <div vertically-centered-element centering-animation="500">vertically centered element</div>

</body>

</html>

div{
    border: 1px solid #dcdcdc;
    padding: 0.5em;
}

vertically-centered-element
===========================

Directive to dynamically add absolute position to a targeted element and to position it vertically centered.

Dependencies
============
To use this directive in your projects, you must include its dependencies. Asumming you already have angular and jquery libraries included in your project, you're going to need the main directive file: VerticallyCenteredElement.js

Usage
=====
Once you've checked that everything is in place, you can use this directive like so:

```html
<div vertically-centered-element centering-animation="500">centered element</div>
```

or

```html
<vertically-centered-element centering-animation="500">
    <div>centered element</div>
</vertically-centered-element>
```

Parameters
==========
centering-animation

It dictates if an animation should be used to vertically center an element. Value should be given in milliseconds.