angular-centered

An angular directive for rendering a vertically and horizontally positioned overlay https://github.com/iameugenejo/angular-centered

by manikantag

HTML

<div ng-app="testApp">
    <centered>
        <h2>This text should be centered</h2>
    </centered>
</div>

CSS

/*https://github.com/iameugenejo/angular-centered/angular-centered.css*/
.angular-center-container {
  position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:table;
	pointer-events: none;
    z-index:9999;
}
.angular-centered {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

JavaScript

/*https://github.com/iameugenejo/angular-centered/angular-centered.js*/
angular.module("angular-centered", []).directive("centered", function() {
  return {
		restrict : "ECA",
		transclude : true,
		template : "<div class=\"angular-center-container\">\
						<div class=\"angular-centered\" ng-transclude>\
						</div>\
					</div>"
	};
});

//test app
angular.module("testApp", ["angular-centered"]);