javascript - 具有自动增量功能的中心div(高度)

Question

我有这样的代码，当选中任何复选框时自动增加 div 高度，并在未选中时减少高度，但我想在增加或减少其高度时将 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/