容器里面有两个元素，一个子元素居中，另一个子元素靠近容器右边.

1、使用 Flex：

.container {display: flex;justify-content: center; /* 使中间的元素居中 */align-items: center;     /* 垂直居中 */
}.center-item {/* 居中元素不需要特殊样式，会自动居中 */
}.right-item {margin-left: auto;      /* 将右侧元素推到最右边 */
}

2、使用 Grid：

.container {display: grid;grid-template-columns: 1fr auto 1fr;
}.center-item {grid-column: 2;        /* 放在中间列 */
}.right-item {grid-column: 3;        /* 放在最右列 */justify-self: end;     /* 在列内靠右对齐 */
}

3、使用绝对定位：

.container {position: relative;
}.center-item {position: absolute;left: 50%;transform: translateX(-50%);
}.right-item {position: absolute;right: 0;
}