html图标垂直居中

要实现HTML图标的垂直居中，可以使用CSS的Flexbox属性或者表格布局。在Flexbox中，可以通过设置父元素的display属性为flex，然后使用align-items属性将子元素垂直居中。在表格布局中，可以将父元素的display属性设置为table，子元素的display属性设置为table-cell，并使用vertical-align属性将子元素垂直居中。

下面是使用Flexbox实现HTML图标的垂直居中的代码：

HTML代码：

<div class="container">
  <div class="icon">
    <img src="icon.png" alt="">
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度，可以根据实际情况进行调整 */
}

.icon {
  /* 根据实际情况设置图标容器的样式 */
}

使用表格布局实现HTML图标的垂直居中的代码：

HTML代码：

<div class="tablebox">
  <div id="imgbox">
    <img src="icon.png" alt="">
  </div>
</div>

CSS代码：

.tablebox {
  display: table;
  width: 100%;
  height: 100vh; /* 设置容器高度，可以根据实际情况进行调整 */
}

#imgbox {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 如果需要水平居中，可以添加text-align属性 */
}

#imgbox img {
  /* 根据实际情况设置图标的样式 */
}

以上是两种常见的方法，根据实际需求选择其中一种即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [让HTML img垂直居中的三种办法：](https://blog.csdn.net/qq_44647809/article/details/115564185)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]