Angular中实现步骤圆形下方标签居中对齐（适配任意项数）

1. 调整HTML结构 #

给包裹步骤圆形和标签的外层div添加类名step-wrapper，为标签的绝对定位提供正确的参照容器：

<div *ngIf="items" class="container d-flex justify-content-center align-items-center">
    <div *ngFor="let item of items; let i = index" class="progresses">
        <div class="step-wrapper">
            <div class="steps"
                 [class.active]="!(currentItemIndex <= i)">
                <span *ngIf="currentItemIndex <= i" class="font-weight-bold">{{i + 1}}</span>
                <span *ngIf="currentItemIndex > i"><i class="fa fa-check"></i></span>
            </div>
            <span class="steps-footer">{{item}}</span>
        </div>
        <span class="line"
              *ngIf="i !== items.length-1"
              [class.active]="!(currentItemIndex <= i)"></span>
    </div>
</div>

2. 修改CSS样式 #

通过以下调整解决圆形偏移、标签居中及适配问题：

.container {
    margin-bottom: 3rem;
}

.progresses{
    display: flex;
    align-items: center; /* 保持线条与圆形中心对齐 */
}

.line{
    width: 20em;
    height: 6px;
    background: linear-gradient(to left, dimgrey 50%, #63d19e 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}

.line.active{
    background-position: left;
}

.steps{
    display: flex;
    transition: background-color 1s;
    background-color: dimgrey;
    color: #fff;
    font-size: 14px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.steps.active{
    background-color: #63d19e;
}

/* 新增步骤容器样式 */
.step-wrapper {
    position: relative;
    width: 40px; /* 与圆形宽度一致，确保标签居中范围准确 */
    height: 40px; /* 固定高度，避免标签影响线条与圆形的对齐 */
}

.steps-footer {
    position: absolute;
    top: 100%; /* 将标签定位到圆形正下方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中，适配任意长度标签 */
    margin-top: 8px; /* 可选：调整标签与圆形的间距 */
    white-space: nowrap; /* 可选：防止标签换行，如需换行可移除 */
}

核心逻辑说明 #

• step-wrapper固定高度与圆形一致，配合.progresses的align-items: center，保证线条始终和圆形中心对齐，避免标签导致圆形偏移
• steps-footer通过left: 50% + transform: translateX(-50%)实现绝对定位下的自适应居中，无需固定宽度，完美支持任意数量的步骤项
• 绝对定位的标签不占用文档流空间，不会改变容器高度，确保进度条整体布局稳定

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