如何放大HTML文本，同时使其中心固定在某一点上？

如何设置网页上文本的动画并增加其大小，同时使中心固定在某一点上？这就是我尝试过的：

但是可以看到，定位点位于（0，0）而不是文本中心。我尝试了使用

文本对齐

但是没有得到想要的结果

HTML:

JS:

---

请注意，我无法对

main

div进行任何更改。此外，我发现使用

字体大小

进行动画制作并不能提供非常平滑的动画。

与其设置

字体大小

属性的动画，不如设置动画

将文本上所需的

字体大小

与

变换：缩放（0）

一起设置，然后将其动画设置为默认的

变换：缩放（1）

：

document.getElementById（'button'）。addEventListener（“单击”，函数（）{
document.querySelector（'.text'）.classList.toggle（“效果”）；
});
.container{
位置：相对位置；
}
.文本{
位置：绝对位置；
变换：比例（0）；
字号：5em；
}
@-webkit关键帧增长{
100%{变换：比例（1）；}
}
@关键帧增长{
100%{变换：比例（1）；}
}
.效果{
-webkit动画：向前增长1秒；
动画：向前增长1秒；
}
开始
你好，世界！
您需要指定边距：0自动，请尝试以下操作：
只更改了css部分

#main {
  position: relative;
}

#div {
  margin:0 auto;;
  text-align: center;
  width:82%;
}

@-webkit-keyframes my-animation {
  0% {
    font-size: 0em;
  }
  100% {
    font-size: 5em;
  }
}

.effect {
  -webkit-animation: my-animation 1s;
  /* Safari 4+ */
  animation: my-animation 1s;
  animation-fill-mode: forwards;
}

`
附带问题：我需要在一个用HTML5/JS开发的单页游戏的环境中完成这项工作。有没有流行的库来帮助这些游戏中流行的动画效果？是的。我已经尝试了text align属性，但是技巧似乎是设置div的宽度。如果省略了宽度，它就不会像这里看到的那样工作
#main
{
  position: relative; 
}

#div
{
  position:absolute;
  font-size:0em; 
}

@-webkit-keyframes my-animation {
  0%   { font-size: 0em; }
  100% { font-size: 5em; }
}

.effect {
  -webkit-animation: my-animation 1s; /* Safari 4+ */  
  animation: my-animation 1s;
  animation-fill-mode: forwards;  
}

var e = document.getElementById("button");
var div = document.getElementById("div");
e.addEventListener("click", function()
                  {  
  div.className = "effect";
});

#main {
  position: relative;
}

#div {
  margin:0 auto;;
  text-align: center;
  width:82%;
}

@-webkit-keyframes my-animation {
  0% {
    font-size: 0em;
  }
  100% {
    font-size: 5em;
  }
}

.effect {
  -webkit-animation: my-animation 1s;
  /* Safari 4+ */
  animation: my-animation 1s;
  animation-fill-mode: forwards;
}