How to position a div in the middle of the screen when the page is bigger than the screen
CssHtmlWindowCenterCss Problem Overview
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?
Css Solutions
Solution 1 - Css
just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
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;
}
Solution 2 - Css
I think this is a simple solution:
<div style="
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #f3f3f3;">Full Center ON Page
</div>
Solution 3 - Css
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");
Solution 4 - Css
Try this one.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Solution 5 - Css
Just put margin:auto;
<div id="mydiv">Test Div</div>
Solution 6 - Css
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
This worked for me
Solution 7 - Css
Short answer, Just add position:fixed and that will solve your problem
Solution 8 - Css
<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>
Solution 9 - Css
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>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>
In above sample loading div will always be in center.
Hoping this will help you :)
Solution 10 - Css
Two ways to position a tag in the middle of screen or its parent tag:
Using positions:
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%);
}
Using flex:
The parent tag style should looks like this:
#parent-tag {
display: flex;
align-items: center;
justify-content: center;
}
Solution 11 - Css
#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
Solution 12 - Css
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">
Solution 13 - Css
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>
Solution 14 - Css
USING FLEX
display: flex;
height: 100%;
align-items: center;
justify-content: center;
Solution 15 - Css
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
Solution 16 - Css
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.