CSS 如何将模态框的内容框居中显示在任何屏幕上

简介

CSS是层叠样式表的缩写。它是一种用于描述标记语言文档呈现方式的样式语言。

使用CSS定位元素，您可以将模态框的内容框居中显示在任何屏幕上。将position属性设置为”absolute”，然后利用top和left属性将元素居中显示是一种实现的方法。left和top属性应设置为50%。

方法

使用各种不同的CSS技术，可以将任何屏幕的中心与模态框的内容框对齐。它们包括−

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

现在让我们详细看一下每种方法及其示例。

方法1：使用“position属性和top和left属性”

这种方法首先通过将position属性设置为”absolute”，然后使用top和left属性将元素居中显示在屏幕上。left和top属性应设置为50%。当您希望元素完全居中时，使用transform属性和值”translate(-50%, -50%)”。

示例

这里，我们将逐步演示如何实现此方法−

步骤1 − 在项目目录（index.html）中创建一个HTML文件。

步骤2 − 在HTML文件中，为模态窗口中的内容框创建一个容器元素。这可以是一个具有CSS可以定位的类或id的div元素。

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

步骤3 - 将模态框的内容框的位置属性设置为”absolute”。

.modal {
   position: absolute;
}

步骤4 − 要将模态内容框放在屏幕中心，使用top和left属性。left和top属性应该设置为50%。

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

步骤5 − 要使元素完美居中，使用transform属性和值”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;
}

步骤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文件中，为弹出窗口的内容框创建一个容器元素。这可以是一个带有类或ID的div元素，供CSS选择器使用。

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

步骤3 - 使用设置了align-items属性为center和justify-content属性为center的模态框的父容器。

.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属性，都设置为center。

.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;
}

步骤6 − 最终的代码将会像这样 −

<!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>