PureCSS Grid 不以 Firefox 为中心答案

【问题标题】：PureCSS Grid not centered on FirefoxPureCSS Grid 不以 Firefox 为中心
【发布时间】：2015-01-27 10:54:48
【问题描述】：

我正在为我的网站尝试PureCSS，看起来一切都很好。我在 Firefox 中打开它，发现我的内容没有居中。

HTML/CSS 非常简单。如果我打开 Inspector 工具，我可以看到我的 <div class="content pure-u-1 pure-u-md-3-5"> 以 60% 的宽度正确呈现。如果是这样，那为什么不是

.content {
    margin: 0 auto;
}

在 Firefox 中将我的内容居中？在 Chrome 中一切正常。我已经有一段时间没有做前端的东西了，但是经过一些快速搜索后，我看到人们仍然推荐margin: 0 auto; 进行居中，所以我认为这与网格框架有关？我也将所有内容都设置为box-sizing: border-box;。

【问题讨论】：

标签： css yui-pure-css

【解决方案1】：

这似乎是浏览器之间的渲染不一致。

在您使用的框架中，网格元素设置为inline-block。元素必须是block 级别才能使margin: 0 auto 产生效果并使元素在FireFox 中居中：

.content {
    margin: 0px auto;
    display: block;
}

框架样式的罪魁祸首：

.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4, .pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5, .pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8, .pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24, .pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
    display: inline-block; /* Culprit */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

【讨论】：

谢谢！这解决了它，你的解释是有道理的。 :) 当它让我接受时会接受。

【解决方案2】：

我使用的居中文本如下：

.content {    
    width: 50%;    
    left: 50%;    
    position: absolute;   
    margin-left: -25%;    
    text-align: center;  
}

它适用于我测试过的所有浏览器，包括 ff

添加：当您最小化浏览器窗口时，它还会缩小文本。

【讨论】：