如何固定按钮高度并保持尺寸位置一致、文本居中？

直接用flex布局就能解决你的问题，不用复杂的绝对定位，具体调整如下：

• 给按钮设置display: flex和align-items: center，实现文本垂直居中
• 固定按钮高度为35px，搭配合适的水平内边距，避免文本溢出
• 移除之前的绝对定位相关样式——它会让文本脱离按钮的文档流，导致对齐和溢出问题

修改后的代码：

HTML #

<button class="custom-btn">按钮文本</button>
<button class="custom-btn">短文本</button>

CSS #

.custom-btn {
  height: 35px;
  padding: 0 16px; /* 水平内边距可按需调整 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选，实现文本水平居中 */
  border: none;
  background: #007bff;
  color: white;
  cursor: pointer;
  box-sizing: border-box; /* 确保内边距不会额外增加按钮总高度 */
}

这样不管文本长短，都能在35px高的按钮里稳定垂直居中，也不会出现文本溢出的情况。核心是利用flex的对齐属性替代容易出问题的绝对定位，同时用box-sizing: border-box保证按钮高度不受内边距影响。

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