Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Align the modal content box to the center of any screen?
Introduction
CSS, or cascading style sheets, is an acronym. It is a styling language used to describe how a document written in a markup language is presented.
Using CSS to position the element, you may align a modal content box to the middle of any screen. Setting the position property to "absolute" and then utilizing the top and left properties to center the element on the screen is one method for accomplishing this. The left and top properties should be set to 50%.
Approaches
The center of any screen can be aligned with a modal content box using a variety of different CSS techniques. They consist of −
Using the position property and the top and left properties
Using Flexbox
Let us look at each approach in detail with examples now.
Approach 1: Using “position property & the top and left properties”
This method centers the element on the screen by first setting the position property to "absolute" and then using the top and left properties. The left and top properties should be set to 50%. When you want the element to be perfectly centered, use the transform property with the value "translate(-50%, -50%)".
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − Create an HTML file in your project directory (index.html).
Step 2 − In the Html file, make a container element for the content box in your modal window. This may be a div element that has a class or id that CSS can target.
<div class="modal"> <p>Modal content goes here...</p> </div>
Step 3 − Set the modal content box's location property to "absolute."
.modal {
position: absolute;
}
Step 4 − To put the modal content box in the middle of the screen, use the top and left properties. The left and top properties should be set to 50%.
.modal {
position: absolute;
top: 50%;
left: 50%;
}
Step 5 − For the element to be perfectly centered, use the transform attribute with the value "translate(-50%, -50%)".
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Step 6 − For the modal content box, you may additionally specify a width and height; doing so will determine whether it appears as a dialogue box or a modal.
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
}
Step 7 − To make it appear like a modal, you can apply certain CSS styles, such as a background color, padding, border, and shadow.
.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 − 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 {
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>
Approach 2: Using FlexBox
A quick method of centering components on the screen is provided by Flexbox. To align elements both horizontally and vertically, you can use the align-items and justify-content properties.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − Create an HTML file in your project directory (index.html).
Step 2 − In the Html file, make a container element for the content box in your modal window. This may be a div element that has a class or id that CSS can target.
<div class="modal-container">
<div class="modal">
<p>Modal content goes here...</p>
</div>
</div>
Step 3 − Use the parent container of the modal with the align-items property set to the center and the justify-content property set to the center.
.modal-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Step 4 − Use the parent container of the modal's align-items and justify-content properties, both set to center.
.modal {
width: 300px;
height: 200px;
}
Step 5 − To make it appear like a modal, you can apply certain CSS styles, such as a background color, padding, border, and shadow.
.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>
Conclusion
A crucial component of web development is centering a modal content box on any screen. In this article, we explored a variety of ways, including using CSS Grid Layout, CSS Transform, the position property, the top and left properties, Flexbox, and Grid Layout. Remember that the layout is only one component of the modal and that JavaScript code must be supplied in order for the modal to function.
23K+ Views
