css让div中icon垂直居中

要在CSS中使`<div>`元素内的图标垂直居中，你可以使用多种方法，这里提供两种常见的方法：

1. **Flexbox** (适用于现代浏览器)
如果`<div>`的容器设置了`display: flex;`，并且你是垂直居中单个项目，可以这样做：

   .container {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中，这里是不必要的，因为只有一个项目 */
   }
   
   .container > i { /* 或者直接对需要居中的元素 */
     font-size: your-icon-font-size;
   }

2. **Grid布局** (同样适用于现代浏览器)
如果你想采用Grid布局，设置类似的方式：

   .container {
     display: grid;
     place-items: center; /* 等同于align-items和justify-items: center */
   }
   .container > i {
     font-size: your-icon-font-size;
   }

3. **内联样式**
如果你的图标是一个行内元素（例如`<i>`标签），可以利用`vertical-align: middle;`:

   <div style="display: inline-block;">
     <i class="your-icon" style="vertical-align: middle;">...</i>
   </div>

或者给`.your-icon`添加一个包含`line-height`的`style`属性：

   .your-icon {
     line-height: normal; /* 或者设置一个具体的值等于div的高度 */
     vertical-align: middle;
   }