Javascript-使用纯Javascript水平和垂直居中div

我试图在不知道高度/宽度的情况下，水平和垂直地将一个div居中。我已经在jquery中实现了这一点，但我正在努力将其转换为纯js，因为我不希望依赖性。。有什么想法吗

<script>
    $(document).ready(mt);
    $(window).resize(mt);
    function mt(){
    var contentLocked = $('.lockerPopup').outerHeight(); 
        marginTop = ( $(document).height() - contentLocked ) / 2;
        $('.lockerPopup').css({'top': marginTop});}
</script>

使用.offsetWidth和.offsetHeight获取元素的尺寸，并获取窗口尺寸的window.innerWidth和window.innerHeight。其余的逻辑非常简单，可以使用.style.top和.style.left将其居中

看

或者，如果你想把多个东西放在中心，或者你不需要绝对定位，我建议你看看flexbox或者使用它

---

在CSS中完全远离JS。

您可以使用左50%居中；前50%和-webkit转换：翻译-50%，50%；显然，添加所有其他版本的webkit transform以实现跨浏览器兼容性

---

无论div的宽度/高度和父容器大小如何，它都将始终居中放置， 您只能使用CSS执行此操作：

---

是否可以包含html？如果您担心仅仅因为不知道div的高度和宽度而不知道要设置什么边距，您仍然可以使用CSS来实现这一点。这会让它像这样离开页面：您使用的是JS方法还是CSS方法？是否添加了position:absolute？

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

<div class="container">
    <div class="element"><p>test</p></div>
</div>

html,body{
    height:100%;
    width:100%;
}
.container {
    display:table;
    height:100%;
    width:100%;
    background:#CCC;
}

.element {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100px;
    height:100px;
    color:#222;
}