数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在任何屏幕中央对齐模态内容框？
简介
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 - 在您的项目目录中创建一个 HTML 文件 (index.html)。
步骤 2 - 在 Html 文件中，为模态窗口中的内容框创建一个容器元素。这可以是一个 div 元素，它具有 CSS 可以定位的类或 ID。
<div class="modal"> <p>Modal content goes here...</p> </div>
步骤 3 - 将模态内容框的 position 属性设置为“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 文件中，为模态窗口中的内容框创建一个容器元素。这可以是一个 div 元素，它具有 CSS 可以定位的类或 ID。
<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>
结论
将模态内容框居中于任何屏幕是 Web 开发中的一个重要组成部分。在本文中，我们探讨了多种方法，包括使用 CSS Grid 布局、CSS Transform、position 属性、top 和 left 属性、Flexbox 和 Grid 布局。请记住，布局只是模态的一个组成部分，为了使模态正常工作，必须提供 JavaScript 代码。
30,000+ 次浏览
