Chrome正常但Safari中text-align、justify-content失效问题求助

问题出在你当前设置的display: block上——justify-content: center是Flex布局专属属性，块级元素（block）不支持该属性，所以你之前添加的样式在Safari中完全未生效。结合Safari对行高、文本对齐的解析差异，按以下方式修改CSS即可解决：

.box-product .add-items .bttn-add {
    width: 115px;
    height: 30px;
    /* 改用flex布局，让水平垂直居中属性生效 */
    display: inline-flex;
    /* 水平居中文本 */
    justify-content: center;
    /* 垂直居中，替代line-height的方案更稳定 */
    align-items: center;
    background-color: var(--naranjoAgro);
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700;
    border-radius: 15px;
    margin: 0 0 0 1em;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    /* 兜底对齐规则，兼容特殊渲染场景 */
    text-align: center;
}

关键修改说明： #

• 将display: block改为display: inline-flex（需保持行内特性时）或display: flex：仅Flex容器能识别justify-content、align-items，这两个属性可同时实现文本水平+垂直居中，比单纯依赖line-height更适配Safari的字体渲染逻辑。
• 移除原line-height: 30px：用align-items: center替代，避免Safari中因字体基线差异导致的垂直偏移。
• 保留text-align: center作为兜底：虽Flex布局已能实现居中，但在按钮内部嵌套元素等极端场景下，可确保文本不偏移。

若修改后仍有问题，可排查：

• 父元素是否继承了text-align属性覆盖按钮设置，可临时添加text-align: center !important排查（不建议长期使用!important，找到冲突根源后移除）。
• 检查是否有更高优先级的CSS选择器覆盖当前规则，可通过浏览器开发者工具查看元素计算后的样式结果。

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