固定宽度容器内中间元素宽度可变时，两侧inline <div>如何平分剩余宽度？

AI 小北

2026-5-20

解决固定容器内标题居中+两侧平分黑线的布局问题

嘿，这个需求用flexbox其实就能完美解决，你之前没成功应该是没搭配对正确的属性！我给你两种靠谱的方案，都是直接就能用的：

方案一：Flexbox 实现（推荐）

这是最直观也最易维护的写法，只需要调整几个属性就行：

.headline {
  width: 700px;
  display: flex; /* 启用flex布局 */
  align-items: center; /* 让黑线和标题垂直居中对齐 */
  gap: 16px; /* 可选：给标题和黑线之间加一点间距，视觉更舒服 */
}

.blackline {
  background-color: #000;
  height: 10px;
  flex: 1; /* 关键属性：让两个黑线平分容器剩余空间 */
}

h1 {
  margin: 0; /* 去掉h1默认的上下外边距，避免容器高度被撑开 */
}

<div class="headline">
  <div class="blackline"></div>
  <h1>blah blah blah</h1>
  <div class="blackline"></div>
</div>

关键说明：

flex: 1 是 flex-grow: 1 的简写，意思是两个.blackline元素会自动平分容器中除了<h1>内容宽度之外的所有剩余空间
align-items: center 确保黑线和标题在垂直方向对齐，不会出现黑线贴在标题底部的情况
可选的gap属性可以给标题和黑线之间增加间距，提升视觉体验

方案二：Grid 实现

如果你更喜欢用Grid布局，这个写法同样简洁：

.headline {
  width: 700px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 三列：左右平分空间，中间自适应内容 */
  align-items: center;
  gap: 16px; /* 可选间距 */
}

.blackline {
  background-color: #000;
  height: 10px;
}

h1 {
  margin: 0;
}