如何将图标和文本居中对齐？

将图标和文本居中对齐可以通过以下几种方式实现：

1. 使用CSS的Flexbox布局：Flexbox是一种强大的布局模型，可以轻松实现元素的居中对齐。可以通过设置父容器的display属性为flex，然后使用justify-content和align-items属性来控制图标和文本的水平和垂直居中对齐。

示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

1. 使用CSS的Grid布局：Grid布局也是一种强大的布局模型，可以将页面划分为网格，通过设置网格项的属性来实现对齐。可以将图标和文本分别放置在网格项中，并使用justify-self和align-self属性来控制图标和文本的水平和垂直居中对齐。

示例代码：

.container {
  display: grid;
}

.icon {
  justify-self: center;
  align-self: center;
}

1. 使用CSS的position属性：可以使用position属性将图标和文本的父容器设置为相对定位，然后将图标和文本分别设置为绝对定位，并使用top、left、right、bottom属性来调整它们的位置，使其居中对齐。

示例代码：

.container {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上是几种常见的方法，根据具体情况选择适合的方式来实现图标和文本的居中对齐。