容器里面有两个元素,一个子元素居中,另一个子元素靠近容器右边.
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;
}
居中元素
靠右元素