按钮图标在 i 标签中 垂直水平居中展示

在HTML中，如果你想将按钮图标垂直和水平居中地显示在`<i>`标签内，通常可以结合CSS样式来实现。你可以使用Flexbox或者Grid布局，这两种现代布局模式对于元素对齐非常方便。下面是一个简单的例子：

<i class="button-icon">
  <button class="centered-button">我的按钮</button>
</i>

<style>
.centered-button {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 24px; /* 可调整图标大小 */
}
</style>

在这个例子中，`.centered-button`元素内部的按钮会被设置为flex容器，并通过`justify-content: center;`使其内容在水平方向上居中，`align-items: center;`使其内容在垂直方向上居中。

如果你希望使用传统的CSS，也可以借助`line-height`和绝对定位来达到类似的效果：

<i class="button-icon">
  <button class="centered-button">
    <span>我的按钮</span>
  </button>
</i>

<style>
.button-icon {
  position: relative;
}

.centered-button {
  width: 60px; /* 或者自适应宽度 */
  height: 60px; /* 自适应高度 */
  line-height: 60px; /* 设置相同的高宽，使文本垂直居中 */
  text-align: center; /* 文本水平居中 */
  position: absolute; /* 使内部元素脱离文档流 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 配合top和left使中心对齐 */
}
</style>