如何让按钮元素内的文本垂直居中？

嘿，完全懂这种“明明应该很简单但就是卡壳”的感觉！你遇到的问题大概率是因为使用的Simple CSS框架给按钮自带了一些默认样式，干扰了你自己的居中设置，咱们一步步来解决：

先排查根源：框架默认样式的影响 #

首先打开浏览器开发者工具（按F12），选中你的按钮，查看「计算样式」面板，看看有没有这些可能捣乱的属性：

• 框架是否给按钮设置了固定的line-height？
• 有没有默认的padding或者height值让按钮的容器高度和文本行高不匹配？
• 是不是框架把按钮的display属性设成了其他值（比如block），导致你的inline-flex没生效？

针对性的解决方案 #

给按钮加一段优先级足够的CSS，覆盖框架的默认样式，确保垂直居中生效：

方案1：Flex布局（最可靠的通用方式）

这种方式不管按钮高度是固定还是自适应都能生效，直接把按钮变成flex容器，让内容自动居中：

button {
  /* 先重置框架可能加的默认样式 */
  margin: 0;
  padding: 0.6rem 1.2rem; /* 按需调整内边距，控制按钮大小 */
  line-height: 1; /* 重置行高，避免干扰 */
  border: none; /* 如果不需要边框可以加上，保留的话就去掉这行 */
  
  /* 核心居中代码 */
  display: inline-flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 可选，同时实现水平居中 */
  height: auto; /* 让按钮高度由内容+内边距决定，固定高度的话直接写数值比如40px */
}

方案2：行高匹配按钮高度（适合固定高度的按钮）

如果你的按钮是固定高度的，比如height: 40px，那可以直接把line-height设成和高度一样的值，前提是按钮里只有纯文本，没有其他元素：

button {
  height: 40px;
  line-height: 40px;
  padding: 0 1rem; /* 左右内边距控制宽度 */
}

为什么你之前的设置没生效？ #

你说调整line-height没效果，大概率是因为框架的默认样式优先级比你的代码高，或者按钮的高度是由padding撑开的，这时候line-height只会改变文本自身的行高，没办法让文本在整个按钮容器里垂直居中——而flex布局是直接控制容器内元素的对齐方式，就不会有这个问题。

备注：内容来源于stack exchange，提问作者Morgan