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 以便更好地理解

小提琴在这里

提前感谢，对不起我的英语不好

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