CSS实现居中元素始终与左侧元素相邻的布局方案咨询

需求说明 #

• 核心要求：「Centered」元素始终保持容器水平居中
• 附加要求：「Left」元素始终紧贴「Centered」元素的左侧

当前代码实现 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 10px;
}

.container {
  background-color: #ccc;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.container>div:first-child,
.container>div:nth-child(2) {
  padding: 10px 20px;
  background-color: #fA5858;
  color: #fff;
  text-transform: uppercase;
  font: 15px/1 Sans-Serif;
}

.container>div:first-child {
  position: absolute;
  display: block;
  width: 100px;
}

.container>div:nth-child(2) {
  display: inline-block;
  background-color: #5882FA;
  margin: 0 100px;
  white-space: nowrap;
}

HTML代码 #

<div class="container">
  <div>left</div>
  <div>Centered</div>
</div>

优化后的实现方案 #

思路说明 #

使用CSS Grid布局实现，核心逻辑是将两个元素放置在容器的同一网格单元格内：

• 容器设置display: grid和place-items: center，确保单元格内容水平垂直居中
• 给「Left」元素设置grid-area: 1/1使其与「Centered」元素重叠在同一单元格，再通过justify-self: end让它对齐到单元格右侧（即「Centered」元素的左侧）
• 该方案不受元素宽度变化影响，始终保持「Centered」居中、「Left」紧邻左侧的效果

优化后代码 #

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 10px;
}

.container {
  background-color: #ccc;
  display: grid;
  place-items: center;
  padding: 10px;
}

.container .left {
  grid-area: 1/1;
  justify-self: end;
  margin-right: 8px; /* 可根据需求调整间距，删除则完全紧贴 */
  padding: 10px 20px;
  background-color: #fA5858;
  color: #fff;
  text-transform: uppercase;
  font: 15px/1 Sans-Serif;
}

.container .centered {
  grid-area: 1/1;
  padding: 10px 20px;
  background-color: #5882FA;
  color: #fff;
  text-transform: uppercase;
  font: 15px/1 Sans-Serif;
}

HTML代码

<div class="container">
  <div class="left">left</div>
  <div class="centered">Centered</div>
</div>

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