xxxxxxxxxx
.center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
xxxxxxxxxx
.container {
position: relative;
height: 100vh; /* Adjust this value as needed */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Additional styling for your content */
}
xxxxxxxxxx
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
xxxxxxxxxx
.YourDivsClass {
display: flex;
justify-content: center;
align-items: center;
}
xxxxxxxxxx
<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
xxxxxxxxxx
To center a div element, you can use the margin: auto property, along with a fixed width and height.
Here is an example:
<style>
.center {
width: 50%;
height: 50%;
margin: auto;
background-color: red;
}
</style>
<div class="center">I am a centered div!</div>
This will center the div with a red background and a width and height of 50% of its parent element.
If you want to center the div horizontally and vertically within the page, you can also use absolute positioning, along with the top, left, right, and bottom properties set to 0.
Here is an example:
<style>
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 50%;
background-color: red;
}
</style>
<div class="center">I am a centered div!</div>
This will center the div with a red background and a width and height of 50% of the browser window.