写出不定宽度的子级div，在相对于固定宽度的父级元素水平居中的布局

要实现不定宽子级 div 相对于固定宽度父级元素水平居中，可以使用几种方法：

1. 使用 Flexbox:

这是最现代化和推荐的方法，兼容性也很好。

<div class="parent">
  <div class="child">
    不定宽度内容
  </div>
</div>

.parent {
  width: 500px; /* 固定宽度 */
  display: flex;
  justify-content: center; /* 水平居中 */
}

.child {
  /* 子元素宽度根据内容自适应 */
}

2. 使用 inline-block 和 text-align:

这种方法兼容性非常好，但需要处理子元素的垂直对齐。

<div class="parent">
  <div class="child">
    不定宽度内容
  </div>
</div>

.parent {
  width: 500px; /* 固定宽度 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 使子元素可以被text-align影响 */
  text-align: left; /* 恢复子元素内部文本的左对齐 */
  /*  如果需要垂直居中，可以添加以下样式：
      vertical-align: middle; 
  */
}

3. 使用绝对定位和 transform:

这种方法需要计算，但非常灵活。

<div class="parent">
  <div class="child">
    不定宽度内容
  </div>
</div>

.parent {
  width: 500px; /* 固定宽度 */
  position: relative; /* 设置为相对定位，以便子元素绝对定位 */
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*  如果需要垂直居中，可以添加以下样式：
      top: 50%;
      transform: translate(-50%, -50%);
  */
}

4. 使用 margin: 0 auto:

这种方法只适用于块级元素，并且需要设置子元素的宽度。如果子元素宽度不定，则无法使用此方法。

总结:

• 推荐使用 Flexbox，简洁易懂，兼容性好。
• 如果需要兼容非常老的浏览器，可以使用 inline-block 和 text-align。
• 绝对定位和 transform 方法灵活，但需要额外的计算。

选择哪种方法取决于你的具体需求和项目情况。 如果不需要兼容特别老的浏览器，Flexbox 是最佳选择。

希望以上信息能帮到你!