如何使用flex将按钮与居中文本对齐，但将图标对齐到一侧？

Question

我正在寻找有关如何使用flex创建此按钮的建议尽可能少的html。它具有居中的文本，但图标与一侧对齐。最重要的是，两者在中间是垂直对齐的。

我遇到的问题：一旦我沿着水平方向将{flex}设置为align-items，我就无法控制垂直居中而不会在每个项目周围添加额外的HTML容器。

JSFiddle： https://jsfiddle.net/mwwy6bg7/3/

我们假设height上的padding和button不一致，因为还有其他用例，我有相同的场景，以及居中的字符串可能是两行或三行[虽然图标只有一行]。所以我无法使用padding或absolute定位。

到目前为止，我一直坚持使用非flex，因为它使用较少的HTML。但我发现自己在案件中使用了absolute个职位。

已解决：需要合并flexbox和position-absolute。只需要两次应用flexbox。请参阅：https://jsfiddle.net/mwwy6bg7/8/

<a href="/" class="button">
  Button with a long multiline label
  <span class="icon">&gt;</span>
</a>

.button {
  box-sizing: border-box;
  position: relative;
  width: 240px;
  height: 100px;
  padding: 0 20px;
  border: 1px solid #ccc;
  background: #f7f7f7;

  text-decoration: none;
  text-align: center;
  font: 16px arial, sans-serif;
  font-weight: bold;
  color: #595959;

  display: flex;
  align-items: center;
  justify-content: center;
}
a .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  display: flex;
  align-items: center;
}