使用其他元素设置元素的填充

Question

我想使用JavaScript更改十个div的填充。 div用于在居中的主文本周围创建边框，该边框会更改颜色，因此我无法使用框阴影和flex box（已经尝试过）。我正在这样做，因此它可以很好地响应。这就是我在html中设置的方式：

<span id="title-text" class="head-text center">Tudor Popescu</span> <div id="[one - ten]" class="center border-ring"></div>

我用来设置每个“边框”的填充的公式为：

N =振铃号

CW =内容宽度（文本宽度）

CH =内容高度（文本高度）

B =边框宽度

W =窗口高度

W =窗口宽度

side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)

vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)

我已经尝试过的方法： 我尝试使用jQuery，因此更易于使用。我只尝试了一个div来确保它起作用：

var totalWidth = $(window).width(),
  totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 * 
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 * 
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `${hOne}px ${wOne}px 
${hOne}px ${wOne}px`;

我想知道如何正确执行此操作以及如何使代码正常工作，现在填充比网站的查看端口大。