Hi I'm using something similiar to the following to get a div positioned in the middle of the screen:
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
However the problem with this is it positions the item in the middle of the page not the screen. So if the page is a few screen high and I'm at the top of the page (the top part of the part is displayed on the screen) when I make the div appear it's not even on the screen. You have to scroll down to view it.
Can someone please tell me how you'd make it appear in the middle of the screen?
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
This worked for me
In ur script page...
$('.a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Use a-middle class in the Div...
<div class="a-middle">
<html>
<head>
<style type="text/css">
#mydiv {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100px;
height:200px;
margin:auto;
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
Two ways to position a tag in the middle of screen or its parent tag:
Set the parent tag position to relative (if the target tag has a parent tag) and then set the target tag style like this:
#center {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The parent tag style should looks like this:
#parent-tag {
display: flex;
align-items: center;
justify-content: center;
}
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
Short answer, Just add position:fixed and that will solve your problem
Just put margin:auto;
#mydiv {
margin:auto;
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
<div id="mydiv">Test Div</div>
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
.loader {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
margin-top: -50px;_x000D_
margin-left: -50px;_x000D_
border: 10px solid #dcdcdc;_x000D_
border-radius: 50%;_x000D_
border-top: 10px solid #3498db;_x000D_
width: 30px;_x000D_
height: 30px;_x000D_
-webkit-animation: spin 2s linear infinite;_x000D_
animation: spin 1s linear infinite; _x000D_
}_x000D_
_x000D_
@-webkit-keyframes spin {_x000D_
0% { -webkit-transform: rotate(0deg); }_x000D_
100% { -webkit-transform: rotate(360deg); }_x000D_
}_x000D_
_x000D_
@keyframes spin {_x000D_
0% { transform: rotate(0deg); }_x000D_
100% { transform: rotate(360deg); }_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
_x000D_
<div class="loader" style="display:block"></div>_x000D_
_x000D_
</body>_x000D_
</html>Well, below is the working example for this.
This will handle the center position if you resize the webpage or load in anysize.
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
.loader {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
margin-top: -50px;_x000D_
margin-left: -50px;_x000D_
border: 10px solid #dcdcdc;_x000D_
border-radius: 50%;_x000D_
border-top: 10px solid #3498db;_x000D_
width: 30px;_x000D_
height: 30px;_x000D_
-webkit-animation: spin 2s linear infinite;_x000D_
animation: spin 1s linear infinite; _x000D_
}_x000D_
_x000D_
@-webkit-keyframes spin {_x000D_
0% { -webkit-transform: rotate(0deg); }_x000D_
100% { -webkit-transform: rotate(360deg); }_x000D_
}_x000D_
_x000D_
@keyframes spin {_x000D_
0% { transform: rotate(0deg); }_x000D_
100% { transform: rotate(360deg); }_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
_x000D_
<div class="loader" style="display:block"></div>_x000D_
_x000D_
</body>_x000D_
</html>In above sample loading div will always be in center.
Hoping this will help you :)
Use transform;
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Javascript Solution :
var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
Try this one.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For this you would have to detect screen size. That is not possible with CSS or HTML; you need JavaScript. Here is the Mozilla Developer Center entry on window properties https://developer.mozilla.org/en/DOM/window#Properties
Detect the available height and position accordingly.
USING FLEX
display: flex;
height: 100%;
align-items: center;
justify-content: center;
#div {
top: 50%;
left: 50%;
position:fixed;
}
just set the above three properties any of your element and there you Go!
Your div is exactly at the center of the screen
I think this is a simple solution:
<div style="_x000D_
display: inline-block;_x000D_
position: fixed;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
width: 200px;_x000D_
height: 100px;_x000D_
margin: auto;_x000D_
background-color: #f3f3f3;">Full Center ON Page_x000D_
</div>Source: Stackoverflow.com