如何实现CSS自定义按钮内文本居中并支持尺寸调整？

• 文本垂直偏移：你当前给按钮和它的伪元素统一设置固定行高做居中，这种方案对自定义字体兼容性极差——不同字体的上下留白（字形上下边界、默认字距）差异很大，硬写行高必然出现偏移；另外你把<button>标签嵌套在<a>标签里的写法不符合HTML规范，浏览器给按钮默认加载的内边距、边框盒模型没有重置，也会加剧位置错位。text-align仅控制水平对齐，本身就解决不了垂直偏下的问题。
• 尺寸调整失效：当前代码里的宽高、阴影偏移、故障动画切片参数全是硬编码固定值，单独修改宽高时其他关联参数不会同步变化，显示效果自然错乱。

首先替换原有HTML代码，不要嵌套button标签，直接用a标签实现跳转+按钮样式，避免浏览器默认样式干扰：

<p><a class="glitch-btn" href="/portfolio" data-text="Enter">Enter</a></p>

然后替换原有CSS代码，已将固定值改为CSS变量统一管控，用flex布局实现文字自动居中，不管更换字体、调整尺寸都不会错位：

/* 只需要修改这三个变量就能自由调整按钮尺寸，其他参数自动适配 */
:root {
  --btn-width: 380px;
  --btn-height: 86px;
  --btn-font-size: 36px;
  --btn-shadow-offset: 8px;
  --glitch-color-1: #FF5E1A;
  --glitch-color-2: #7b00ff;
}

.glitch-btn,
.glitch-btn::after {
  width: var(--btn-width);
  height: var(--btn-height);
  font-size: var(--btn-font-size);
  font-family: 'Industry Inc Base', Arial, sans-serif;
  background: linear-gradient(45deg, transparent 5%, #fff 5%);
  border: 0;
  color: #000;
  letter-spacing: 3px;
  box-shadow: var(--btn-shadow-offset) 0px 0px #282828;
  outline: transparent;
  position: relative;
  cursor: pointer;
  /* flex布局实现全字体兼容的完美居中，无需设置line-height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.glitch-btn::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 3%, var(--glitch-color-1) 3%, var(--glitch-color-2) 5%, var(--glitch-color-1) 5%);
  text-shadow: -3px -3px 0px var(--glitch-color-2), 3px 3px 0px var(--glitch-color-1);
  clip-path: var(--slice-0);
}

.glitch-btn:hover::after {
  animation: 1s glitch steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

• 改尺寸：仅需修改CSS最开头--btn-width、--btn-height、--btn-font-size三个变量的值即可，阴影、动画效果会自动适配，不会出现布局错乱。
• 换字体：直接修改font-family属性值即可，flex布局会自动保持文字垂直+水平居中，不需要额外调整行高或内边距。
• 改配色：修改--glitch-color-1、--glitch-color-2两个变量就能更换故障效果的配色。
• 改按钮文字：同时修改a标签内的文本和data-text属性值即可，悬浮故障效果的文字会自动同步。

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