<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.verticalAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah)/2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
$(document).ready(function(e) {
$('.in').verticalAlign();
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>
<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>
</body>
</html>