Как использовать сложение / вычитание в CSS собственности?

Question

Как сложить / вычесть в свойстве css?

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

Я просто пытаюсь добавить / вычесть значение содержимого в верхнем и левом процентах

top: 50% - contents_height_in_number_with_px

* 1006сделать это так, чтобы мое основное содержимое автоматически центрировалось. Примечание: я уже ищу в googled и уже пробую calc (), не найдя никакого решения

Answer 1

В настоящее время это поддерживается только в IE9 и Firefox 10. См. http://caniuse.com/calc

Лучшее решение для вас, вероятно, будет меньше.http://lesscss.org

Если вы используете серверный язык, вы можете даже проанализировать его на лету:

.Net: dotLESS - http://www.dotlesscss.org/ PHP: lessphp - http://leafo.net/lessphp/

.less компилируется до собственного CSS, но позволяет вам делать гораздо больше, чем обычно делает CSS.

Answer 2

Это CSS (calc()) поддерживается не во всех браузерах .Вам нужно знать высоту текущего видового экрана и высоту блока div #.Вот способ определить и то, и другое, т.е. центрировать элемент.Вы можете отказаться от top:50% ; left:calc(50% - 286px);margin-left:-75px в css сейчас.

// 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'));

См. Также this jsfiddle