How to position div in the center of the screen?

Question

Actually in the center of current view, above all other objects. Cross-browser and without 3rd party plugins and etc.

Via CSS or Javascript

UPDATE:

I tried to use Javascript's Sys.UI.DomElement.setLocation() but this positioning object not in absolute location but relative to it's parent.
Is there a function to put in absolute location?

Answer 1

To have it center in the browser, regardless of the page scroll (which is probably what you want), position: fixed will be more reliable. Amending mike108's code:

<style type="text/css"> 
.centered {  
  position:fixed;
  z-index: 100;  
  top:50%;  
  left:50%;  
  margin:-100px 0 0 -100px;  
  width:200px;  
  height:200px;  
}  
</style>

This assumes you have a fixed size box you are showing. If you don't have a fixed size box, you'll need to use Javascript to measure the window and the div and position it explicitly (again, fixed is probably the way to go).

Do test on all your browsers, though. There may be something we're not thinking of.

I'd actually recommend you look at one of the Javascript plugins that does this, at least for a starting point. They have figured it out, even if you don't want to use their code. I think I used jqModal as a starting point.

Answer 2

<style type="text/css"> 
.Div1 {  
position:absolute;  
top:50%;  
left:50%;  
margin:-100px 0 0 -100px;  
width:200px;  
height:200px;  
border:1px solid #9999FF;  
}  
</style> 


<div class="Div1">
</div>

Answer 3

It must have a width assigned ( ie width:500px;) and then margin:auto; should do it.

Answer 4

I'm using this block of js code;

// call function for both height and width center

    setToCenterOfParent( $('#myDiv'), document.body, false, false);

// call function for both height center only

    setToCenterOfParent( $('#myDiv'), document.body, false, true);

// call function for both width center only

    setToCenterOfParent( $('#myDiv'), document.body, true, false);

//function definition

    function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){
        parentWidth = $(parent).width();
        parentHeight = $(parent).height();  
        elementWidth = $(element).width();
        elementHeight = $(element).height();
        if(!ignoreWidth)
            $(element).css('left', parentWidth/2 - elementWidth/2);
        if(!ignoreHeight)
            $(element).css('top', parentHeight/2 - elementHeight/2);
    }

Answer 5

Please check this solution. There is no need to define a width or a height of the div box. It will be always in the middle/centre of the screen. I hope my solution will be usefull for everyone.

<style type="text/css"> 

  .mask{
    position:fixed;
    z-index:100;
    width:100%;
    height:100%;
    text-align: center;
    color: white;
    background-color: rgba(0,0,0,0.75);
    overflow:hidden;
  }

  .contener{
    height:100%;
    display:inline-table;
  }

  .contener .content{
    vertical-align: middle;
    display:table-cell;
  }

  .contener .content p{
    padding:2em;    
    border:1px solid #3d3d3d;
    background-color: #1d1d1d;
    border-radius: 10px;
    -moz-box-shadow: 0px 10px 10px black;
    -webkit-box-shadow: 0px 10px 10px black;
    box-shadow: 0px 10px 10px black;
  }

</style> 

<div class="mask">  
   <div class="contener">
     <div class="content">
       <p>Test string</p>
     </div>
   </div>
</div>

Answer 6

This can be easily achieved now with flex. Microsoft is no longer supporting older versions of windows. Plus, Mozilla and Chrome are constantly updating their engines, so flexbox is firmly rooted in all modern browsers.

#container{
   display: flex;
   justify-content: center;
   align-items: center;
}

Everything set as an immediate child of that #container element will be centered.

This short bit of code is absolutely perfect for things like login menus or centering text over a background image.

EDIT - CODE BELOW IS OUTDATED SEE UPDATED CODE ABOVE

If you want something vertically and horizontally centered, try this...

 #shell{
width:100%;
height:100%
position:absolute;
z-index:100;
background: rgba(255,255,255,.8);
display:table;
}

#inner{
 margin:0 auto;
 display:table-cell;
 vertically-align:middle;
 width: /* input width here */
}


#overlay_container{
   width: /* input width here again */
   height: /* input height here */
   additional-styles: /* self explanatory */
}