如何在按钮中添加并居中图标？已添加但无法居中，寻求解决方法

你的问题核心在于两点：按钮本身未配置居中布局规则，且图标自带的负边距强制偏移了元素位置。按以下修改即可解决：

修改后的完整CSS代码 #

.btn {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    /*border: none; */
    cursor: pointer;
    /* 添加flex布局实现水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.gg-format-justify,
.gg-format-justify::before {
    display: block;
    box-sizing: border-box;
    width: 16px;
    height: 2px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 0 8px 0;
    color: rgb(47, 94, 183);
}

.gg-format-justify {
    /* 移除破坏居中的负边距 */
    /* margin-top: -11px; */
    transform: scale(var(--ggs,1));
    position: relative;
    /* 微调图标位置，让三条横线整体垂直居中 */
    top: 2px;
}

.gg-format-justify::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
}

关键改动说明 #

• 给.btn添加display: flex+justify-content: center+align-items: center，这是最简洁的内部元素水平垂直居中方案，能让图标自动贴合按钮中心。
• 删除.gg-format-justify里的margin-top: -11px，这个负边距会强制把图标向上偏移，直接破坏居中逻辑。
• 新增top: 2px微调图标位置，因为该图标通过自身、伪元素、阴影实现三条横线结构，调整后能让整个图标组在按钮内完全居中。

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