如何用纯CSS实现标题独立居中且标签居右的布局？

方案1：绝对定位 + Flex 居中 #

这种方法最简单，通过绝对定位把label从正常文档流中抽离，完全不干扰title的居中逻辑。

修改后的HTML结构： #

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>

CSS实现： #

.container {
  position: relative; /* 为绝对定位提供参考坐标系 */
  display: flex;
  justify-content: center; /* 让title水平居中 */
  align-items: center; /* 垂直居中（可选，根据实际需求调整） */
  /* 以下为容器可视化样式，可按需修改 */
  width: 400px;
  height: 60px;
  border: 1px solid #eee;
}

.label {
  position: absolute;
  right: 10px; /* 调整与容器右侧的间距 */
}

方案2：Grid 布局 #

利用Grid的跨列特性，让title占据整个容器宽度并居中，label固定在右侧区域。

HTML结构（与原结构一致）： #

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>

CSS实现： #

.container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余空间，第二列自适应内容宽度 */
  /* 以下为容器可视化样式，可按需修改 */
  width: 400px;
  height: 60px;
  border: 1px solid #eee;
}

.title {
  grid-column: 1 / -1; /* 让title跨遍所有列 */
  justify-self: center; /* 自身水平居中 */
  align-self: center; /* 垂直居中（可选） */
}

.label {
  grid-column: 2; /* 固定在第二列 */
  align-self: center; /* 垂直居中（可选） */
  margin-right: 10px;
}

两种方案都能满足需求：方案1适合简单场景，代码更简洁；方案2的Grid布局扩展性更强，后续添加其他元素时更灵活。

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