JavaScript实现祖先元素滚动时保持孙子元素居中

可以通过以下步骤来实现：

1. 获取祖先元素和孙子元素的宽高。
2. 获取祖先元素的滚动条位置，可以使用 'scrollTop' 和 'scrollLeft' 属性。
3. 计算孙子元素在祖先元素中心的位置，可以使用以下公式：

var centerX = (ancestorWidth - grandchildWidth) / 2;
var centerY = (ancestorHeight - grandchildHeight) / 2;

4. 根据滚动条位置调整孙子元素的位置，可以使用以下代码：

grandchild.style.left = centerX - ancestor.scrollLeft + 'px';
grandchild.style.top = centerY - ancestor.scrollTop + 'px';

完整代码如下：

var ancestor = document.getElementById('ancestor');
var grandchild = document.getElementById('grandchild');
var ancestorWidth = ancestor.offsetWidth;
var ancestorHeight = ancestor.offsetHeight;
var grandchildWidth = grandchild.offsetWidth;
var grandchildHeight = grandchild.offsetHeight;

var centerX = (ancestorWidth - grandchildWidth) / 2;
var centerY = (ancestorHeight - grandchildHeight) / 2;

grandchild.style.left = centerX - ancestor.scrollLeft + 'px';
grandchild.style.top = centerY - ancestor.scrollTop + 'px';

ancestor.addEventListener('scroll', function() {
  grandchild.style.left = centerX - ancestor.scrollLeft + 'px';
  grandchild.style.top = centerY - ancestor.scrollTop + 'px';
});