Question

How to add/subtract in css property?

#box {
  position: absolute;
  top: 50% ;
  left: calc(50% - 286px);
  margin-left: -75px /* half of the width */
  background-color: red; /* or something more useful */
  z-index:100;
}

I am simply try to add/subtract the contents value in the actual top and left percentage

top: 50% - contents_height_in_number_with_px

I want to do this so that my main contents is automatically centered
Note:i already search on googled and already try calc() not found any solution

Answer 1

That css (calc()) is not supported in all browsers. You need to know the height of the current viewport and the height of div#box. Here’s a way to determine both, i.e. to center an element. You can ditch top:50% ; left:calc(50% - 286px);margin-left:-75px in the css now.

// get viewport dimensions
function viewport(){
    var  innerw = window.innerWidth
        ,root   = innerw  ? window : (document.body || document.documentElement)
        ,body   = (document.body || document.documentElement)
        ,which  = innerw ? 'inner' : 'client';
    return {  width : root[ which+'Width' ] 
             ,height : root[ which+'Height' ]
             ,scrollTop: body.scrollTop 
             ,scrollLeft: body.scrollLeft };
}

// center an element (uses viewport function)
function center(el){
  var dims = viewport()
     ,l = Math.floor( (0.5*dims.width)-(0.5*el.offsetWidth) )
     ,h = Math.floor( (0.5*dims.height)-(0.5*el.offsetHeight) );
  el.style.left = l+'px';
  el.style.top  = h+'px';
  return true;
}
// usage:
center(document.getElementById('box'));

See also this jsfiddle