¿Cómo se usa agregar / restar en css propert?

¿Cómo agregar / restar en la propiedad 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; } 

Simplemente bash agregar / restar el valor del contenido en el porcentaje real superior e izquierdo

 top: 50% - contents_height_in_number_with_px 

Quiero hacer esto para que mi contenido principal se centre automáticamente Nota: ya busco en Google y ya bash calc () no encontré ninguna solución

Ese css ( calc() ) no es compatible con todos los navegadores . Necesitas saber la altura de la ventana gráfica actual y la altura del cuadro div #. Aquí hay una manera de determinar ambos, es decir, centrar un elemento. Puedes deshacerte de la top:50% ; left:calc(50% - 286px);margin-left:-75px top:50% ; left:calc(50% - 286px);margin-left:-75px en el css ahora.

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

Ver también este jsfiddle

Actualmente esto solo es compatible con IE9 y Firefox 10. Consulte http://caniuse.com/calc

Una mejor solución para ti probablemente sería menos. http://lesscss.org

Si usa un lenguaje del lado del servidor, incluso puede analizarlo sobre la marcha:

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

.less comstack hasta CSS nativo, pero le permite hacer mucho más de lo que normalmente haría CSS.