js实现 祖先元素是宽度是500父级元素宽度是1000子元素宽度是300使子元素居中显示

可以使用 margin 属性来实现子元素居中显示，具体实现如下：

HTML 代码：

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

CSS 代码：

.ancestor {
  width: 500px;
}

.parent {
  width: 1000px;
  margin: 0 auto;
}

.child {
  width: 300px;
  margin: 0 auto;
}

解释：

• 祖先元素 .ancestor 的宽度为 500px。
• 父级元素 .parent 的宽度为 1000px，同时使用 margin: 0 auto; 来使其水平居中。
• 子元素 .child 的宽度为 300px，同时使用 margin: 0 auto; 来使其水平居中。由于父级元素已经水平居中，因此子元素也会居中显示。