CSS Bug修复：FontAwesome图标在模态设置按钮div内无法居中

你写的所有居中代码全部失效的核心原因有两个：

• justify-content、align-items是Flex布局的专属控制属性，必须给父元素设置display: flex才会生效，你目前没有给作为图标的父容器.modal-setting-button配置这个触发属性，等于写了无效代码。
• 单靠text-align: center只能控制行内内容的水平对齐，完全无法实现垂直方向的居中，最终会导致FontAwesome图标只靠上对齐在按钮顶部，无法落在40px高度按钮的视觉中心。

另外两个带图标的按钮用的是CSS背景图的定位控制，和DOM元素类的FontAwesome图标的居中逻辑完全不同，不存在参考性。

1. 给通用按钮类.modal-setting-button补上Flex布局的核心配置，让所有按钮自带Flex容器能力，从根源上解决内部元素的居中问题：

   .modal-setting-button {
     /* 原有样式保持不变，新增以下3行配置 */
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }
   

2. 清理冗余代码：可以直接删掉原本写在.modal-setting-toggle.open .modal-setting-button:nth-of-type(2)选择器里的justify-content: center; align-items: center; text-align: center;三行重复配置，避免代码冗余。
3. （可选优化）可以给FontAwesome图标设置和交互态一致的主题色，提升视觉统一性，比如给.modal-setting-button i加color: #3498db的样式。

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