如何将material-icons图标居中显示在折叠菜单触发div中？

嘿，我之前也碰到过这种「在线demo正常本地就出问题」的情况，大概率是细节没盯紧或者本地环境有小差异，咱们一步步来搞定：

首先看你给出的CSS代码，发现一个明显的笔误：line-height: 50p少了个x，应该是line-height: 50px！这可能是导致居中失效的直接原因，先把这个修正了再说。

下面给你几个靠谱的解决方案，按优先级尝试：

1. 基础行高+文本对齐方案 #

因为Material Icons本质是字体，所以用行高匹配容器高度+文本居中的方式就能轻松搞定。修正后的代码：

.collapse-menu-trigger {
  display: block;
  width: 70px;
  height: 50px;
  line-height: 50px; /* 修正笔误，和height一致实现垂直居中 */
  text-align: center; /* 水平居中图标 */
  cursor: pointer; /* 加上鼠标指针，提升交互体验 */
}

2. Flexbox万能居中方案 #

如果上面的方法还是不生效（比如图标字体自带特殊行高），Flexbox是更稳妥的选择，不管内容是什么都能完美居中：

.collapse-menu-trigger {
  display: flex;
  width: 70px;
  height: 50px;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  cursor: pointer;
}

3. 排查本地环境差异 #

既然JSFiddle里正常，本地失效，还要检查这几点：

• 字体加载是否正常：打开浏览器控制台（F12）的Network标签，确认Material Icons的字体文件没有404错误，同时确保你正确引入了字体样式：

  @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  

• 样式冲突检查：用浏览器元素检查器查看.collapse-menu-trigger的Computed样式，看看有没有其他CSS规则（比如更高优先级的选择器）覆盖了display、line-height这些属性。

按这个流程排查下来，应该就能解决图标不居中的问题了！

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