如何在固定高度的<i>标签中居中图标？已试padding-top，求自动实现方法

嘿，我来帮你搞定这个图标居中的问题！手动加padding-top确实太麻烦了，一旦元素高度或者图标尺寸变化就得重新调整，下面这几个方法都能让图标自动居中，适配各种情况：

方法1：Flexbox（推荐，现代浏览器首选） #

Flexbox是目前最灵活的布局方案，轻松实现垂直居中，还能顺便搞定水平居中：

i {
  background: red;
  height: 100px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 可选：让图标同时水平居中 */
}

不管你后面怎么修改height值，图标都会自动保持在容器垂直中心，完全不用手动计算间距。

方法2：Grid（更简洁的双方向居中） #

Grid布局的写法更精简，一行代码就能同时实现垂直和水平居中：

i {
  background: red;
  height: 100px;
  display: grid;
  place-items: center;
}

这个方法和Flexbox一样灵活，代码量更少，适合追求简洁的场景。

方法3：传统line-height + vertical-align（兼容老浏览器） #

如果需要兼容IE这类老浏览器，可以用这个经典方案，原理是让行高和容器高度匹配，再配合垂直对齐：

i {
  background: red;
  height: 100px;
  display: inline-block; /* 把i转为块级内联元素，让line-height生效 */
  line-height: 100px; /* 行高等于容器高度 */
  vertical-align: middle;
}

注意这个方法需要line-height和height保持一致，如果后续修改容器高度，记得同步更新行高。

为什么不推荐padding-top？ #

手动设置padding-top需要你自己计算图标和容器顶部的间距，一旦图标尺寸、容器高度变化，或者换了其他Font Awesome图标，都得重新调整数值，完全没有自动适配性，上面的方法都能避免这个问题。

内容的提问来源于stack exchange，提问作者Mav