How to center div on screen (No JS) - html

Question

i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)

Answer 1

Instead of position: absolute try out position: fixed

Answer 2

Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.

Answer 3

/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE

Answer 4

center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2