本文详解在 css 中为带固定高度的按钮（如箭头导航按钮）实现文本垂直居中的两种可靠方法：flexbox 布局与 line-height 技巧，并结合 react 实际案例指出常见误区及修复方案。

本文详解在 css 中为带固定高度的按钮（如箭头导航按钮）实现文本垂直居中的两种可靠方法：flexbox 布局与 line-height 技巧，并结合 react 实际案例指出常见误区及修复方案。

在构建响应式卡片轮播组件（如作品集网站的横向滚动区）时，左右导航按钮常需固定尺寸与精准居中排版。你遇到的问题——为

设置 height: 100px 后文本无法垂直居中——本质是块级元素默认流式布局与行内内容对齐机制冲突所致。关键在于：仅设 height 不改变文本的基线对齐行为，必须显式控制垂直对齐策略。

✅ 推荐方案一：Flexbox（语义清晰、兼容性好、推荐首选）

将按钮本身设为 Flex 容器，利用 align-items: center 实现子元素（即

）的垂直居中：

.left-btn, .right-btn {
  height: 100%;
  width: 60px;
  position: absolute;
  border: none;
  top: 0;
  /* 关键：启用 Flex 布局 */
  display: flex;
  justify-content: center; /* 水平居中（已存在） */
  align-items: center;     /* ✅ 新增：垂直居中 */
  background-color: rgba(0, 0, 0, 0);
}

/* 移除 h1 的冗余 height 和 width —— 由父容器 flex 控制 */
.left-btn > h1,
.right-btn > h1 {
  font-size: 50px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.436);
  border-radius: 10px;
  color: white;
  margin: 0; /* 重置 h1 默认外边距 */
  text-align: center;
  cursor: pointer;
}

✅ 优势：不依赖字体大小或行高计算；支持任意内容（图标、多行文本）；现代浏览器全覆盖（IE11+ 支持良好）。

✅ 方案二：line-height（轻量简洁，适合单行文本）

当

内容为纯单行符号（如）时，可直接让 line-height 等于容器高度：

.left-btn > h1,
.right-btn > h1 {
  /* ...其他样式保持不变... */
  height: 100px;          /* 保持原有高度 */
  line-height: 100px;     /* ✅ 关键：强制行高 = 高度 */
  margin: 0;
}

⚠️ 注意事项：

line-height 仅对单行内联内容有效；若后续改为多行文本或添加等嵌套结构，将失效；

需确保 h1 无 padding 或 border 干扰实际高度计算；

在响应式场景中，line-height 需随 height 动态调整（不如 Flex 自适应）。

? 同时修复的潜在问题

你的原始 CSS 中还存在两个易被忽略但影响布局的关键点：

的默认上下外边距
：浏览器为标题元素设置了 margin-top/margin-bottom，会撑开容器并破坏居中。务必重置：
```
.left-btn > h1, .right-btn > h1 {
  margin: 0; /* 必加 */
}
```
.left-btn 的定位逻辑错误：CSS 中 .left-btn 被设为 right: 0，实际应为左按钮 → 应改为 left: 0；右按钮保留 right: 0：
```
.left-btn {
  left: 0; /* ❌ 原为 right: 0 —— 已修正 */
}
.right-btn {
  right: 0;
}
```