中心div(高度)具有自动增加功能

Question

我有这段代码，当任何复选框被选中时自动增加div高度，当未选中时减少高度，但我想垂直地在屏幕上增加或减少他的高度，我该怎么做呢?

谢谢你的帮助!

http://jsfiddle.net/MetCastle/6adby/

    $(function () {
      $(':checkbox').click(function() {
       $(".scroll").show();
       var delta = $(this).is(':checked') ? -1 : 1;
       if(delta < 0){
        $("#scroll").append( "<h2>" + $(this).next("label").html()  + "</h2>");
        $('.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<children.length; i++) {
          $(children[i]).prop('disabled', true);
        }
      } else {
        var children = $('.options').children('input:not(:checked)');
        for(var i= 0; i<children.length; i++) {
          $(children[i]).prop('disabled', false);
        }
      }
      if ($(".count").text() == "18") {
        $(".scroll").hide();
      }
    });
    });

Answer 1

你可以将top设置为50%，然后在每次添加时重新计算margin-top为-height/2

top:50%

然后在你的方法集

var scroll=$('#scroll');
scroll.css('margin-top',(Math.ceil(scroll.height()/-2)+'px'))

http://jsfiddle.net/6adby/14/