如何将模态内容框对齐到任意屏幕的中心?

htmlcssweb developmentfront end technology更新于 2025/1/7 21:00:17

简介

CSS，即层叠样式表 (Cascading Style Sheets)，是一个缩写词。它是一种样式语言，用于描述用标记语言编写的文档的呈现方式。

使用 CSS 定位元素，您可以将模态内容框对齐到任意屏幕的中心。将position属性设置为"absolute"，然后使用top和left属性将元素居中是实现此目的的一种方法。left和top属性应设置为50%。

方法

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

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

现在让我们通过示例详细了解每种方法。

方法1:使用"position属性以及top和left属性"

此方法首先将position属性设置为"absolute"，然后使用top和left属性，使元素在屏幕上居中。left和top属性应设置为50%。如果您希望元素完全居中，请使用值为"translate(-50%, -50%)"的 transform 属性。

示例

这里，我们将通过一个分步示例来实现此方法 -

步骤 1 - 在您的项目目录中创建一个 HTML 文件 (index.html)。

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

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

步骤 3 − 将模态内容框的 location 属性设置为"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: transform(-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 文件中，为模态窗口中的内容框创建一个容器元素。它可以是一个具有 CSS 可定位的 class 或 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;
}

步骤 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>

结论

Web 开发的一个关键要素是将模态框内容框在任何屏幕上居中。在本文中，我们探讨了多种方法，包括使用 CSS 网格布局、CSS Transform、position 属性、top 和 left 属性、Flexbox 以及网格布局。请记住，布局只是模态框的一个组成部分，必须提供 JavaScript 代码才能使模态框正常运行。