Search notes:

CSS positioning: center an element on client area and on content

<!DOCTYPE html>
<!-- 

   Idea from:

       http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.center.js

-->
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>Center div</title>

  <style type="text/css">

    #center_screen,
    #center_page
    {
         background-color:#f93;
         border: 1px solid black
    }


    body /*#content*/
    {
         background-color:#38c;
         margin: 0;
    }


  </style>

  <script type="text/javascript">
    function main() {

//     var content   =  document.getElementById('content');
       var content   =  document.body;
       content.style.height = '400px';

       var scr   = document.getElementById('center_screen');
       var pag   = document.getElementById('center_page'  );

       var scr_s = scr.style;
       var pag_s = pag.style;

       scr_s.position   = 'fixed'   ;
       pag_s.position   = 'absolute';

       scr_s.left       = '50%';
       pag_s.left       = '50%';

       scr_s.top        = '50%';
       pag_s.top        = '50%';

       scr_s.zIndex     =  99  ;
       pag_s.zIndex     =  99  ;

       scr_s.marginLeft = '-' + (scr.offsetWidth  / 2) + 'px';
       pag_s.marginLeft = '-' + (pag.offsetWidth  / 2) + 'px';

       scr_s.marginTop  = '-' + (scr.offsetHeight / 2) + 'px';
       pag_s.marginTop  = '-' + (pag.offsetHeight / 2) + 'px';

       pag_s.marginLeft = parseInt(pag_s.marginLeft) + document.documentElement.scrollLeft;
       pag_s.marginTop  = parseInt(pag_s.marginTop ) + document.documentElement.scrolltop ;

    }
  </script>

</head>
<body onload='main();'>

<!--  <div id='content'>-->

  <div id='center_screen'>Center on the screen</div>
  <div id='center_page'  >Center of the page</div>

<!--</div>-->

</body>
</html>

Github repository about-css, path: /positioning/center/on-clientArea-and-on-content.html

CSS positioning: center an element on client area and on content

See also