如何实现同一层级元素：指示器完全居中，按钮固定居右？

修改后的代码 #

CSS

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 作为按钮绝对定位的父容器 */
  min-height: 40px; /* 可选：确保容器有足够高度容纳元素 */
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}

.below-content button {
  position: absolute;
  right: 10px; /* 控制按钮与右侧的间距 */
}

HTML

<div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <button>Button that should be right aligned</button>
</div>

核心逻辑说明 #

1. 相对定位容器：给.below-content添加position: relative，让内部的绝对定位元素以它为基准。
2. 按钮独立定位：按钮使用position: absolute; right: 10px脱离正常文档流，直接固定在容器右侧，完全不干扰指示器的布局。
3. 指示器全局居中：保持Flex的justify-content: center，让指示器始终相对于整个.below-content容器的水平中线对齐，而非按钮左侧的剩余空间。
4. 兼容性与鲁棒性：无论指示器或按钮单独存在，布局逻辑都能正常工作——按钮单独存在时依然居右，指示器单独存在时依然全局居中。

内容的提问来源于stack exchange，提问作者cts