jquery - CSS 或 jQuery 使内容在缩小时垂直居中

Question

我无法弄清楚如何在用户缩小时将内容垂直居中。

我有 3 个 div，当它们被缩小时，它们会粘在顶部而不是保持居中，如下所示:

蓝色只是第二个 div 的背景。我需要它们垂直居中，而不是在用户缩小时停留在顶部。 (Cntrl/cmd -)

Answer 1

使用 $(window).height() 获取视口(viewport)的高度。使用类似的东西:

$(window).resize(function(){
  var ht = $(window).height()/2-$('#theGroupContainer').height()/2+'px';
  $('#theGroupContainer').css({top: ht});
})

确保:

body{
  position:relative;
}
#theGroupContainer{
  position:absolute;
}

% 用于 #theGroupContainer 子级 height 和 width。