在响应式布局中将绝对中间的文本与 fittext.js 对齐答案

【问题标题】：Align text in absolute middle with fittext.js in responsive layout在响应式布局中将绝对中间的文本与 fittext.js 对齐
【发布时间】：2014-09-03 22:16:11
【问题描述】：

就像标题所说的那样，我正在拼命地试图将文本 h1 置于响应元素的中间。我现在尝试了 2 个小时，但似乎无法正常工作。我做错了什么？

我尝试了absolute 定位和- 边距，但这似乎并不准确：

.category-description{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -10% 0 0 -30%;
    font: 16px/1.8 "Titillium Web", sans-serif;
}

为了更好地理解，我做了一个 JSFiddle

Fiddle goes here

在此先感谢，抱歉我的英语不好

【问题讨论】：

标签： css responsive-design position alignment fittextjs

【解决方案1】：

如果您不需要支持更旧的浏览器，您可以这样做：

.category-description{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    font: 16px/1.8 "Titillium Web", sans-serif;
}

【讨论】：