容器里面有两个元素，一个子元素居中，另一个子元素靠近容器右边.
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;
}
居中元素
靠右元素
原文地址：https://blog.csdn.net/qq_21138747/article/details/143712551
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！