如何使用javascript而不是jQuery将div居中？（固定分区、渐变边框、动态大小、自动中心）

我目前正在为一个MediaWiki网站编写代码。我没有权限访问和修改LocalSettings.php（一个难以联系的工程师），我通常会在其中键入几行代码来启用MediaWiki友好的Javascript版本

我已经用jQuery编写了代码，以实现我想要的工作方式，但我需要用Javascript重写它

让内部div尊重动态大小的外部div的边界有点像噩梦，因为百分比不是用边距和填充来计算的，但我发现了这一点

在任何情况下，请检查这一点，并帮助我了解如何为javascript编写代码

对于那些对jfiddle不感兴趣的人，我在这里提供了jQuery代码：

// This centers the div when the page first loads
$('.popup-border').css('margin-left', '-' + ($('.popup-border').outerWidth() / 2) + 'px');
$('.popup-border').css('margin-top', '-' + ($('.popup-border').outerHeight() / 2) + 'px');

// This centers the div each time the page is resized
$(window).resize(function() {
    $('.popup-border').css('margin-left', '-' + ($('.popup-border').outerWidth() / 2) + 'px');
    $('.popup-border').css('margin-top', '-' + ($('.popup-border').outerHeight() / 2) + 'px');
});

---

我怎样才能用javascript而不是jQuery重写它呢？

仅供参考，MediaWiki在以前的任何版本中都默认提供并使用jQuery。