css - 在响应式布局中使用 fittext.js 在绝对中间对齐文本

Question

就像标题所说的那样，我正拼命地尝试将文本 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

提前致谢，抱歉我的英语不好

Answer 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;
}