如何在HTML/CSS中实现鼠标选中文本时垂直居中？

你的问题出在h1元素的line-height设置：当前line-height: 2rem远大于字体大小1.5rem，浏览器默认的文本选中高亮会撑满整个line-height区域，导致文字在高亮背景里视觉上不居中。

修复步骤 #

直接调整h1的行高，或者用内边距替代line-height来控制垂直空间，同时可选自定义选中样式：

修改后的CSS代码

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

h1 {
  letter-spacing: -0.05em;
  font-weight: 700;
  font-size: 1.5rem;
  /* 调整行高为更贴合字体的比例，让文字和选中背景垂直对齐 */
  line-height: 1.2;
  display: block;
  color: inherit;
  /* 若需保留原垂直间距，用padding替代line-height */
  /* padding: 0.25rem 0; */
}

/* 可选：统一自定义选中样式，消除浏览器差异 */
::selection {
  background: #b4d5ff;
  line-height: inherit;
}

原理说明 #

• 当line-height接近字体实际高度时，文本选中高亮的高度会和文字高度匹配，视觉上自然垂直居中。
• 用padding控制垂直间距而非line-height，可以避免选中高亮被额外的行高撑开，保证高亮只包裹文字区域。

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