CSSプロパティのadd/subtractの使い方は？

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 

実際のトップに内容値を減算/追加しようと左割合います：すでに私グーグルで検索すると、すでに見つかっていない）（

Answer 1

。現在のビューポートの高さとdivの高さを知る必要があります＃ボックス。両方を決定する、つまり要素を中央に配置する方法があります。あなたは今すぐcssでtop:50% ; left:calc(50% - 286px);margin-left:-75pxを捨てることができます。

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

Answer 2

は現在、これが唯一のIE9とFirefox 10でサポートされているすべてのソリューションをCALCを試してみてください参照してくださいhttp://caniuse.com/calc

あなたのためのよりよい解決策は少なくなるでしょう。あなたは、サーバー側の言語を使用する場合はhttp://lesscss.org

あなたも、その場でそれを解析することができます

ネット：ドットなし - http://www.dotlesscss.org/ PHP：lessphp - http://leafo.net/lessphp/

.lessはネイティブCSSまでコンパイルしますができますあなたはCSSが通常行うよりもはるかに多くを行う必要があります。 CSS（calc()）がnot supported in all browsersあること