CSS 如何将模态内容框调整到任何屏幕的中心

简介

CSS，即层叠样式表，是一个首字母缩写。它是一种样式语言，用于描述用标记语言编写的文档的表现方式。

使用CSS来定位元素，你可以将一个模态内容框调整到任何屏幕的中间。将position属性设置为 “绝对”，然后利用top和left属性将元素置于屏幕中央，是实现这一目的的方法之一。左边和上面的属性应该被设置为50%。

方法

任何屏幕的中心都可以通过各种不同的CSS技术与模态内容框对齐。它们包括 —

使用position属性以及top和left属性
使用Flexbox

现在让我们通过实例来详细了解一下每种方法。

方法1：使用 “位置属性及顶部和左侧属性”

这种方法通过首先将位置属性设置为 “绝对”，然后使用顶部和左侧属性，使元素在屏幕上居中。左边和上面的属性应该被设置为50%。当你想让元素完全居中时，使用转化属性，值为 “translate(-50%, -50%)”。

例子

在这里，我们将通过一个逐步的例子来实现这种方法 −

第1步 - 在你的项目目录中创建一个HTML文件（index.html）。

第2步 - 在Html文件中，为模态窗口的内容框制作一个容器元素。这可以是一个拥有CSS可以定位的类或ID的div元素。

<div class="modal">
   <p>Modal content goes here...</p>
</div>

第3步 - 将模态内容框的位置属性设置为 “绝对”。

.modal {
   position: absolute;
}

第4步 - 要把模态内容框放在屏幕的中间，使用顶部和左侧的属性。左边和上面的属性应该被设置为50%。

.modal {
   position: absolute;
   top: 50%;
   left: 50%;
}

第5步 - 为了使元素完全居中，使用转化属性，其值为 “translate(-50%, -50%)”。

.modal {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

第6步 - 对于模态内容框，你可以额外指定一个宽度和高度；这样做将决定它是作为一个对话框还是一个模态出现。

.modal {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 200px;
}

第7步 - 为了使它看起来像一个模式，你可以应用某些CSS样式，如背景颜色、填充、边框和阴影。

.modal {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
   height: 200px;
   background-color: white;
   padding: 20px;
   border: 1px solid black;
   box-shadow: 10px 10px 5px #888888;
}

Step 8 − 最后的代码将是这样的 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .modal {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         /* additional styles for the modal */
      }
      .modal {
         width: 500px;
         height: 400px;
         background-color: #ffffff;
         border: 1px solid #cccccc;
         padding: 20px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         box-shadow: 0px 0px 10px #cccccc;
         border-radius: 10px;
         z-index:1000;
      }
   </style>
</head>
<body>
   <div id="modal" class="modal">
      <!-- modal content here -->
   </div>
   <script>
      window.onresize = function() {
         var modal = document.getElementById("modal");
         var top = (window.innerHeight - modal.offsetHeight) / 2;
         var left = (window.innerWidth - modal.offsetWidth) / 2;
         modal. style.top = top + "px";
         modal. style. left = left + "px";
      }
   </script>
</body>
</html>

方法2：使用FlexBox

Flexbox提供了一种在屏幕上将组件居中的快速方法。为了使元素在水平和垂直方向上都能对齐，你可以使用align-items和justify-content属性。

例子

在这里，我们将通过一个逐步的例子来实现这种方法 −

第1步 - 在你的项目目录中创建一个HTML文件（index.html）。

第2步 - 在Html文件中，为模态窗口的内容框制作一个容器元素。这可以是一个拥有CSS可以定位的类或ID的div元素。

<div class="modal-container">
   <div class="modal">
      <p>Modal content goes here...</p>
   </div>
</div>

第3步 --使用模态的父容器，将align-items属性设置为中心，将justify-content属性设置为中心。

.modal-container {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

第4步 --使用模态的父容器的align-items和justify-content属性，都设置为居中。

.modal {
   width: 300px;
   height: 200px;
}

第5步 - 为了使它看起来像一个模式，你可以应用某些CSS样式，如背景颜色、填充、边框和阴影。

.modal {
   width: 300px;
   height: 200px;
   background-color: white;
   padding: 20px;
   border: 1px solid black;
   box-shadow: 10px 10px 5px #888888;
}

Step 6 − The final code would be like this −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .modal-container {
         display: flex;
         align-items: center;
         justify-content: center;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0,0,0,0.5);
      }
      .modal {
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         width: 500px;
         height: 400px;
         box-shadow: 0px 0px 10px #cccccc;
      }
   </style>
</head>
<body>
   <div class="modal-container">
      <div class="modal">
         <!-- modal content here -->
      </div>
   </div>
   <script>
      window.onresize = function() {
         var modalContainer = document.getElementsByClassName("modal-container")[0];
         modalContainer.style.height = window.innerHeight + "px";
         modalContainer.style.width = window.innerWidth + "px";
      }
      function showModal(){
         var modalContainer = document.getElementsByClassName("modal-container")[0];
         modalContainer.style.display = "flex";
      }
      function hideModal(){
         var modalContainer = document.getElementsByClassName("modal-container")[0];
         modalContainer.style.display = "none";
      }
   </script>
</body>
</html>