title: Center div (height) that have an autoincrement function
body: <p>I have this code that autoincrement div height when any checkbox is checked and decrease height when is unchecked, but I would like to center vertically the div in the screen when increase or decrease his height, how can i do for that ?</p>
  
  <p>Thanks for your help !</p>
  
  <p><a href="http://jsfiddle.net/MetCastle/6adby/" rel="nofollow">http://jsfiddle.net/MetCastle/6adby/</a></p>
  
  <pre><code>    $(function () {
        $(':checkbox').click(function() {
  
         $(".scroll").show();
  
         var delta = $(this).is(':checked') ? -1 : 1;
  
         if(delta &lt; 0){
          $("#scroll").append( "&lt;h2&gt;" + $(this).next("label").html()  + "&lt;/h2&gt;");
          $('.count').text(parseInt($('.count').text()) - 1);
        }
        else{
          $("#scroll h2:contains('" + $(this).next("label").html() + "')").remove();
          $('.count').text(parseInt($('.count').text()) + 1);
        }
  
        if ($(".count").text() == "0") {
          var children = $('.options').children('input:not(:checked)');
          for(var i= 0; i&lt;children.length; i++) {
            $(children[i]).prop('disabled', true);
          }
        } else {
          var children = $('.options').children('input:not(:checked)');
          for(var i= 0; i&lt;children.length; i++) {
            $(children[i]).prop('disabled', false);
          }
        }
  
        if ($(".count").text() == "18") {
          $(".scroll").hide();
        }
  
      });
      });
  </code></pre>