CSS/Styled Components 如何实现顶部返回按钮居左、标题水平居中对齐

实现需求需要保证三个效果： #

• 返回按钮固定在顶部最左侧
• 「Hello World」标题在整个头部区域水平居中
• 二者垂直方向对齐

推荐两种成熟的实现方案：

方案1：Flex + 绝对定位（兼容性好，适配绝大多数场景） #

核心思路是把返回按钮从正常文档流里脱离固定在左侧，头部容器用flex直接让标题居中，同时通过align-items保证垂直对齐。
对应styled-components代码如下：

1. 外层容器样式

const HeaderTopContainer = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px; /* 可根据设计要求调整头部高度 */
`

2. 返回按钮容器样式

const BackContainer = styled.div`
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px; /* 可调整箭头和返回文字的间距 */
  cursor: pointer;
`

3. 标题样式无需额外调整，按设计要求写即可：

const Title = styled.h1`
  font-size: 18px;
  font-weight: 600;
  margin: 0;
`

方案2：Grid布局（代码更简洁，现代浏览器适配完美） #

核心思路是用网格布局把头部横向划分为「返回按钮区-内容区-占位区」三列，标题在内容区居中即可，不需要脱离文档流。
对应样式代码如下：

1. 外层容器样式

const HeaderTopContainer = styled.div`
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  height: 48px;
`

2. 标题加上居中属性即可：

const Title = styled.h1`
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0;
`

两种方案选型建议 #

• 如果标题长度较长，担心和返回按钮重叠，选方案2，标题会自动适配中间区域宽度
• 如果需要标题尽可能占满头部宽度，且标题长度不会超过减去返回按钮宽度的剩余空间，选方案1即可

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