資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
