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

Question

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

我有3个div，当它们被缩小时，它们会向上移动而不是保持居中，如下所示：

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

Answer 1

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

$(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。

Answer 2

您希望他们在用户缩小时移动中心吗？我不知道，但你可以使用javascript添加边距，因为页面缩小，但默认页面粘在顶部。

Answer 3

我最终动态地改变了顶部元素的大小：

$(window).resize(function(){
    var height = $(window).height(); 
    console.log($(window).height());
    $('.header').css('padding-top', height*.4 - 240 + 'px');
});