如何将固定的动态宽度和高度元素居中在页面中间？

Question

我有可拖动的元素，它具有动态高度和宽度。这是基于内容的变化。

我有这个固定元素的中心，这里是HTML：

<div class="option_dialog" id="profile">
  <div class="close_option">Profile <img onclick="document.getElementById('profile').style.display='none';body.style.overflow='auto'" style="float:right;height:20px" src="img/close.PNG">
  </div>
  <div class="dialog_content" id="profile_content" style="overflow:scroll;max-height:400px">
  </div>
  <button onclick="MyWall()" class="common_btn" style="width:98%">My Wall</button>
</div>

css：

.option_dialog {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  margin: auto;
  display: none;
  width: fit-content;
  height: fit-content;
  padding: 0;
  background: #e4e4e4;
}

.dialog_content {
  margin: 2px 2px 1px 1px;
  border: 2px solid #f5f5f3;
  border-radius: 0px;
  overflow: scroll;
  max-height: 350px;
}

js

function profile() {
  var x = document.getElementById("profile");
  x.style.display = "block";
  x.style.zIndex = "1000";
  document.body.style.overflow = "hidden";
}

可拖动代码：*我正在使用touchpunch来启用移动触控设备！

$(function() {
  $(".option_dialog").draggable({
    handle: ".close_option",
    stack: ".option_dialog",
    distance: 0
  });
});

它在台式机和智能手机中运行良好，但它并不局限于某些手机，此外它的宽度和高度将填满整个屏幕。我用谷歌搜索，但没有找到我的问题。