How to position the div popup dialog to the center of browser screen?

Question

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!!

If the `div` has a variable height (it appears that it does), this is very difficult with JavaScript. Will you consider a JS solution? — James Hill, Jan 06 '12 at 21:03
The popup would only scroll down with the page if the popup's position is "fixed". Can we see your jQuery code as well? — Fleep, Jan 06 '12 at 21:03
@Fleep: I don't have Jquery code defined to position the popup. The code just shows the div popup. $('.holder').fadeIn('fast'); — S K, Jan 06 '12 at 21:42
James Hill: If I fix the height of the div, Is it possible to do with CSS? — S K, Jan 06 '12 at 21:44
How about [my answer here for centering images](http://stackoverflow.com/questions/6282968/vertical-centering-variable-height-image-while-maintaining-max-width-height/6284195#6284195)? Just replace `image.absoluteCenter` with `div.absoluteCenter` and change `
` to `
`. It may also be useful to remove `max-height:100%;` from `image.absoluteCenter`, and maybe change the width to 90% or something with a little space on the sides. — 0b10011, Jan 06 '12 at 22:58
@SK A small suggestion. Never assign id and class with same name. i.e. `popup` in this case. — timekeeper, Dec 30 '16 at 06:50

score 24 · Answer 1 · edited Jul 08 '15 at 18:16

24

.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%);
}

edited Jul 08 '15 at 18:16

Michael0x2a

58,192
30
175
224

answered Jul 08 '15 at 09:50

Nikhil Mathew

307
3
2

2

This is the best solution – Paranoid Android Jul 14 '16 at 14:53

score 21 · Accepted Answer · edited Jul 09 '12 at 13:12

21

Here, this ones working. :)

http://jsfiddle.net/nDNXc/1/

upd: Just in case jsfiddle is not responding here is the code...
CSS:

.holder{        
    width:100%;
    display:block;
}
.content{
    background:#fff;
    padding: 28px 26px 33px 25px;
}
.popup{
    border-radius: 7px;
    background:#6b6a63;
    margin:30px auto 0;
    padding:6px;  
    // here it comes
    position:absolute;
    width:800px;
    top: 50%;
    left: 50%;
    margin-left: -400px; // 1/2 width
    margin-top: -40px; // 1/2 height
}

HTML:

<div class="holder">     
    <div id="popup" class="popup">            
        <div class="content">some lengthy text</div>
    </div>
</div>

edited Jul 09 '12 at 13:12

DitherSky

1,050
10
9

answered Jan 07 '12 at 00:07

Klikster

1,154
12
24

I've an issue with positioning the popup in small screen. I had to place my div popup just above the center position as I've one more popup generated from API call, which is positioned in the middle(I am placing the popups one on the other). When I adjusted the position of my div popup to the above the middle, it is looking good in almost all screens except the small screen. The top portion of popup is cutting. How to show the full popup in small screen? This the code I've now... http://jsfiddle.net/dSUZM/1/ – S K Jan 08 '12 at 00:41
The 'margin-top' property for `.popup` needs to be adjusted, it has to be negative half the height of that div. I've changed it to `-260px` (half of 520px) and it looks good on my screen? http://jsfiddle.net/dSUZM/2/ Hopefully that works! – Klikster Jan 09 '12 at 18:28
@Jassi jsfiddle example is not useful, Please use relevant working demostrations. – Preshan Pradeepa Sep 22 '16 at 04:46

Alexander Ivashchenko · Answer 3 · 2018-06-11T11:01:59.933

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;

This should be the accepted answer. It is the correct way to center a popup of **any** size. You don't need the `margin: 0px auto;` though, and use `0` instead of `0px`. — Jose Rui Santos, Nov 25 '15 at 07:51

FURKAN ILGIN · Answer 4 · 2012-01-06T22:54:31.453

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>

Thanks for the reply. It works only in Firefox and chrome. Doesn't work in IE. — S K, Jan 06 '12 at 22:42
sorry i edited the code. You must add this doctype on the top — FURKAN ILGIN, Jan 06 '12 at 22:55

score 2 · Answer 5 · answered Oct 03 '14 at 17:12

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.

http://settledcuriosity.wordpress.com/2014/10/03/centering-a-popup-box-absolutely-at-the-center-of-screen/

score 2 · Answer 6 · answered Jan 06 '12 at 21:00

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.

Giorgio Barchiesi · Answer 7 · 2015-01-20T22:22:33.417

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 */
}

score 0 · Answer 8 · answered Oct 31 '17 at 14:31

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;
}

score 0 · Answer 9 · edited Nov 13 '12 at 14:16

0

I think you need to make the .holder position:relative; and .popup position:absolute;

edited Nov 13 '12 at 14:16

oezi

51,017
10
98
115

answered Jan 06 '12 at 20:58

Danferth

1,841
5
19
25

danferth:Thanks for the reply. I tried adding the position as you said, It is still not positioned in center. Do I need to set any margin-left and top for this? I don't have height defined for the popup. – S K Jan 06 '12 at 21:05
see this [fiddle](http://jsfiddle.net/LxwQJ/) is it the affect you are looking for? – Danferth Jan 06 '12 at 21:17
danferth: it is positioned as center (when browser page width is considered) but how can I exactly make it is centered to the page (considering browser screen width and height) I mean I need to lower the position of the popup so that it looks exactly in the center of the browser page – S K Jan 06 '12 at 22:35
Didn't realize you needed it centered vertically also thought you wanted it 30px from top. my bad. Looks like @Jassi solved it for you. – Danferth Jan 07 '12 at 03:01

How to position the div popup dialog to the center of browser screen?

9 Answers9

Linked