I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don't want to move the popup down when I scroll down the page.
This div is displayed when button is clicked using Jquery.
I tried setting margin-left to half of the width like mentioned in other posts but It isn't working for me.
Here is my code
CSS code:
.holder{
width:100%;
position:absolute;
left:0;
top:0px;
display:block;
}
.popup{
width:800px;
margin:0 auto;
border-radius: 7px;
background:#6b6a63;
margin:30px auto 0;
padding:6px;
}
.content{
background:#fff;
padding: 28px 26px 33px 25px;
}
HTML Code:
<div class="holder">
<div id="popup" class="popup">
<div class="content">
some lengthy text
</div>
</div>
</div>
Thanks!!
This question is related to
css
html
position
positioning
I think you need to make the .holder position:relative; and .popup position:absolute;
Note: This does not directly answer your question. This is deliberate.
A List Apart has an excellent CSS Positioning 101 article that is worth reading ... more than once. It has numerous examples that include, amongst others, your specific problem. I highly recommend it.
It took a while to find the right combination, but this seems to center the overlay or popup content, both horizontally and vertically, without prior knowledge of the content height:
HTML:
<div class="overlayShadow">
<div class="overlayBand">
<div class="overlayBox">
Your content
</div>
</div>
</div>
CSS:
.overlayShadow {
display: table;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 20;
}
.overlayBand {
display: table-cell;
vertical-align: middle;
}
.overlayBox {
display: table;
margin: 0 auto 0 auto;
width: 600px; /* or whatever */
background-color: white; /* or whatever */
}
.popup-content-box{
position:fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I write a code in jquery. It isnt seen an easy way. But i hope it is useful for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.popup{
border: 4px solid #6b6a63;
width: 800px;
border-radius :7px;
margin : auto;
padding : 20px;
position:fixed;
}
</style>
<div id="popup" class="popup">
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var popup_height = document.getElementById('popup').offsetHeight;
var popup_width = document.getElementById('popup').offsetWidth;
$(".popup").css('top',(($(window).height()-popup_height)/2));
$(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>
Its a classical problem, when you scroll the modal popup generated on the screen stays at it place and does not scroll along, so the user might be blocked as he might not see the popup on his viewable screen.
The following link also provides CSS only code for generating a modal box along with its absolute position.
You can use CSS3 'transform':
CSS:
.popup-bck{
background-color: rgba(102, 102, 102, .5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.popup-content-box{
background-color: white;
position: fixed;
top: 50%;
left: 50%;
z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
*so you don't have to use margin-left: -width/2 px;
One solution where we need not know the width/height of the dialog and then assume the margins.
Html:
<div id="dialog-contain"> <-- This div because I assume you might have a display that is not a flex. '
<div id="block">
<div id="centered">
stuffs
</div>
</div>
</div>
Css:
#dialog-contain { // full page container.
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
...
}
#block { // another container simply with display:flex.
display: flex;
height: 100%;
width: 100%;
justify-content: center;
}
#centered { // another container that is always centered.
align-self: center;
}
Source: Stackoverflow.com