将文本置于绝对中间与fittext.js在响应式布局中对齐

Question

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

我尝试了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;
}