Javascript 我应该如何将非引导模式居中？

我希望我的非引导模式垂直和水平居中

我该怎么继续

我已经给出了HTML CSS和JS代码，我也使用了它们

我现在只是随便写了些文字。实际上会有一张报名表

这是我的所有模态代码：

<!-- The Modal -->
    <div id="myModal" class="modal center">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Some text in the Modal Body</p>
          <p>Some other text...</p>
        </div>
        <div class="modal-footer">
          <h3>Modal Footer</h3>
        </div>
      </div>
    </div>

//获取模式
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}

由于它是一个固定的定位元素，您可以使用

转换：translate（-50%，-50%）技巧：


/*模式（背景）*/
#毛毯{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：红色；
/*黑色w/不透明度*/
}
.莫代尔{
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
/*全宽*/
高度：250px；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
利润率：15%；
/*从顶部到中心的15%*/
填充：20px；
边框：1px实心#888；
宽度：80%；
/*根据屏幕大小的不同，大小可能有所不同*/
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}
/*模态头*/
.模态标题{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
/*模态体*/
.模态体{
填充：2x16px；
}
/*模态页脚*/
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@关键帧动画顶点{
从{
顶部：-300px；
不透明度：0
}
到{
排名：0；
不透明度：1
}
}

&时代；
模态头
情态体中的一些文本

其他一些文本

模态页脚
谢谢，但有没有办法让整个背景稍微变白一点。我想要这个颜色的背景：rgba（255，255，255，0.7）它在原始代码中正确发生。现在有了这段代码，它不会正常发生。
rgba（255、255、255、0.7
为白色，如示例所示。尝试将其更改为类似于
红色
或
蓝色
的颜色，您可以看到背景正在工作。可能项目中的其他样式正在覆盖它？背景不会出现在整个屏幕上。它以条形出现在页面中心@KavieshAgarwaal我想你需要一个通常被称为毯子/覆盖元素的元素…我刚刚用oneI更新了这个例子，我刚刚用javascript修复了这个问题，但是如何在其他元素前面放置一个div呢？
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(255, 255, 255, 0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}