Javascript 使所有设备上的动画文本登录点相同

我正在使用一个基本的Jquery动画函数来学习它。到目前为止，这似乎是直截了当的，但我遇到的问题是，我希望措辞在容器中水平/垂直居中对齐

我尝试将Jquery中的登录点设置为50%，但这显然是在50%的位置启动div。现在，如果我将其设为40%，例如，这可能适用于一种屏幕尺寸，但不适用于另一种屏幕尺寸。现在，通常我会调整媒体查询以适应其他屏幕类型，但我不确定它如何与Jquery中定义的登录目的地一起工作

有人知道我如何通过Jquery和更改css来实现这一点吗？无论屏幕大小如何，都可以将其放置在同一位置

$（函数（）{
$（“#text_div”）。设置动画(
{左：“50%”，500，函数（）
);
});
#容器{
利润率：20px 10%；
高度：500px；
边框：1px纯黑；
位置：相对位置；
顶部：70像素；
}
#文字分组{
最大宽度：100%；
高度：50px；
位置：相对位置；
左：0；
最高：40%；
明确：两者皆有；
字号：3em；
}

我的作品

$（函数（）{
$（“#text_div”）。设置动画({
左：“0”
}，500，函数（）{}）；
});
#容器{
利润率：20px 10%；
高度：500px；
边框：1px纯黑；
位置：相对位置；
顶部：70像素；
显示器：flex；
证明内容：中心；
}
#文字分组{
最大宽度：100%；
高度：50px；
位置：相对位置；
左-40%；
最高：40%；
明确：两者皆有；
字号：3em；
}

我的作品
您可以实际计算容器的宽度，即
div
执行数学运算并设置
left
的值。它将始终独立于设备屏幕大小

HTML

JS


文本将始终水平居中，您也可以将其垂直居中

希望这会有帮助
问题是，我不希望这些词出现在确切的中心。我正在想办法让它去同一个地方，不管它在什么地方。哦！你说的同一地点是什么意思？你想让它的位置：固定吗？不。我是说如果我想让它转到
左侧：85%，我希望它在所有屏幕类型上都位于同一位置。哦！每一个屏幕的85%是不同的，所以你需要使用像素值。事实上，我不希望单词出现在准确的中心。我正试图找出如何让它去同一个地点，而不管它在什么地方。这是flexbox吗<代码>显示：flex；证明内容：中心。我以前从未听说过它。flexbox是css3中用于布局的新引入。是的，你有台词。谢谢你的信息！如果您希望文本向左移动：“50%”，那么您的代码是正确的。无论您的容器大小，50%始终是50%。
<div id="container">
    <div id="text_div">My writing Here</div>
</div>

#container {
    height: 500px;
    border: 1px solid black;
    position: relative;
    top: 70px;
  margin:auto;
  width:500px;

}
#text_div {
    position: absolute;
    width:auto;
      top: 50%;
      font-size: 3em;
}

$(function() {
 var a = ($("#container").width())/2- ($("#text_div").width())/2
  $("#text_div").animate(
        {left : a}, 500, function() {}
    );
});