上面回答 margin: 0 auto; 不生效

非常抱歉之前的回答不准确。确实，在绝对定位或浮动布局中，`margin: 0 auto;` 无法使元素水平居中。对于居中对齐的需求，您可以使用其他方法来实现。以下是一种可能的解决方案：

<div class="parent">
  <div class="child child-blue"></div>
  <div class="child child-black"></div>
  <div class="child child-gray"></div>
</div>

.parent {
  width: 100%;
  height: 10%;
  position: relative;
}

.child {
  height: 100%;
  position: absolute;
}

.child-blue {
  background-color: blue;
  width: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.child-black {
  background-color: black;
  width: 10%;
  right: 20px;
}

.child-gray {
  background-color: gray;
  width: 10%;
  right: 40px;
}

在这个解决方案中，父级容器 `.parent` 使用相对定位，子级容器 `.child` 使用绝对定位。`.child-blue` 使用 `left: 50%;` 和 `transform: translateX(-50%);` 来实现水平居中。`.child-black` 和 `.child-gray` 使用 `right` 属性来设置靠右的位置，并设置相应的间距。

请注意，在这种方法中，父级容器的高度需要事先确定，以便子级容器可以使用百分比值来设置高度。同样，请在 HTML 中使用相应的类名，并将 LESS 样式编译为 CSS 使用。