非常感谢@avrahamcool，工作起来很有魅力!
我有一个小的升级。你可以用css替换多余的. centerer span

.button:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

观看演示：http://jsfiddle.net/modernweb/bXD2V/
注：这不适用于"content"属性中的文本。

用一个范围（居中）包裹文本，并在它前面写另一个空范围（居中），就像这样。

• • 超文本标记语言：**

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class='Centered'>Link</span>
</a>

• • 中央支助组**

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

看看这里：http://jsfiddle.net/xVnQ6/

你不需要为此创建任何 Package 器元素或任何东西......只需要使用内联flex（或grid，但我会描述flex）和center的东西，就像这样（这和使用非内联flex是一样的，只是添加了vertical-align来为元素设置一个合理的基线）：

.button { 
      display: inline-flex; 
      flex-direction: column;
      justify-content: center;
      text-align: center;
      vertical-align: middle;
    }

<a href="/" class="button">Link</a>
    <a href="/" class="button">Link<br />More Details</a>

这也适用于动态高度内容。
逐一检查;所以首先有一个显而易见的问题

display: inline-flex;

接下来，由于使用了::before，因此有两个子项（::before和text），由于我想我们希望它们垂直堆叠，因此需要设置方向（因为默认值是"row"）：

flex-direction: column;     /* PS: this defines the "main" axis */

然后，由于我们希望元素沿着 * vertical * aka * column * aka * main * 轴打包并居中（如果使用"row" flex方向，则在此处使用align-content）：

justify-content: center;

由于我们希望文本居中，每行单独居中（请记住，每个项目默认填充 * cross * aka * horizontal * 轴，因此它们已经是全宽的）：

text-align: center;

从技术上讲，这就足够了，除了因为这是一个内联元素，基线将到处都是（基于内容），所以我们可以将它们设置为一致和合理的东西：

vertical-align: middle;   /* align *this* element in the *parent*! */

就是这样直接应用于元素，不需要内部div或 Package 器或任何东西。
如果你只有一个子元素（例如没有::before或其他），那么flex方向是什么并不重要，所以你可以使用默认值来缩短CSS：

/* if there's just one child, or you want to */
/* arrange children horizontally: */
.button {
    display: flex;
    align-content: center;
    text-align: center;
    vertical-align: middle;
}

如果元素的容器将其放置在可接受的位置，并且您不需要调整基线，那么您也可以删除vertical-align。
顺便说一句，如果您愿意，也可以使用内联网格布局完成同样的操作--单行/列网格与flex有很多功能重叠：

/* using grid instead: */
.button { 
  display: inline-grid;
  grid: max-content / auto; 
  align-content: center;
  text-align: center;
  vertical-align: middle;
}

/* this is the important bit: */
/* ------------------------------------------------------*/

.button { 
  display: inline-flex; 
  flex-direction: column;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

/* ------------------------------------------------------*/



/* other styling from OP; not relevant to the centering. */
/* important props removed & displayed above instead.    */    

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    /*display:inline-block;*/
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    /*text-align:center;*/
    text-decoration:none;
    /*vertical-align:middle;*/
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For\A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}
/* placeholders for missing images: */
.button { background-color: #AAA; }
.button:hover { background-color: #DDD; }

this <a href="/" class="button">Link</a> is
<a href="/" class="button">Link<br />More Details</a> text

<br/><br/>
<a href="/" class="button" style="width:unset;height:unset;padding:1em;">......... fixed sizes ........</a>
<a href="/" class="button" style="width:unset;height:unset;padding:1em;">are<br/><br/><br/>not<br/><br/><br/>required</a>

如果有人在设计一个按钮并寻找这个页面，可以合并其他答案：

• 具有display:inline-flex的button设计
• 嵌套在display:inline-block中的button-content div
• 一个button-text span，用于定义文本修饰覆盖（对于父元素定义的页面中没有下划线文本的按钮来说是必需的-特别是在chrome和safari上）

demo example