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

Question

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

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

蓝色只是第二个 div 的背景。我需要它们垂直居中而不是在用户缩小时停留在顶部。（控制/命令-）

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;
}

用于儿童和. %_#theGroupContainerheightwidth

Answer 2

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

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

Answer 3

你想让他们在用户缩小时移动中心吗？我不知道，但您可能可以使用 javascript 在页面缩小时添加边距，但默认情况下页面会粘在顶部。