js计算假设 祖先元素的宽高是500并且有滚动条父元素的宽高是1000在父元素里面有个居中的子元素使子元素水平居中显示在祖先元素的区域内

可以使用以下的CSS代码实现：

.ancestor {
  width: 500px;
  height: 500px;
  overflow: auto;
}

.parent {
  width: 1000px;
  height: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

HTML结构：

<div class="ancestor">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

解释：

1. 祖先元素使用了 overflow: auto; 属性来显示滚动条；
2. 父元素使用了 flex 布局，并且设置了 justify-content: center; 和 align-items: center; 属性来使其子元素居中显示；
3. 子元素设置了宽高，并且使用了背景色来进行显示