我有一个
我的问题是如何编写公式来定位子
<div>
,我想要在其父级 <div>
的可见区域内垂直居中。这是一个演示图像,点击这里。白色圆圈代表子 <div>
,灰色矩形代表父 <div>
,白色矩形代表浏览器的视口。我的问题是如何编写公式来定位子
<div>
,使其在浏览器滚动或调整大小时适用于任何大小的子或父 <div>
。var scrollListener = function(){
var child = $('.child'), // child element
w=$(window).height, // window height
s=$(window).scrollTop(), // window scrollTop position
t=child.parent().offset().top, // parent position in window
h=child.parent().height(), // parent height
p=(w+s-t), // initial position
v=0; // final value for child position
if( t<s ){
// top of parent is beyond viewport
if( p<h ){
// bottom of parent is also beyond viewport
v = (w/2)+s-t;
}else{
// ??? - not working
// bottom of parent is within viewport
v = ((h-p)/2)+s-t;
}
}else{
v = p/2;
}
child.css("top",v);
};
$(window).on("scroll resize",scrollListener);
position: relative
,.child
的margin: auto
将中心对齐黑色方框。 这就是您想要的吗? - RST