Calculando valores em CSS3 com calc ()

calc()é um novo recurso do CSS3 que nos permite calcular valores dentro do CSS . Também é possível misturar diferentes tipos de valor – unidades relativos ou absolutos – como px, %, em, in, cm, mm, pc, e assim por diante (há um monte de novas unidades em CSS3).

Se você quiser centralizar um <div>, por exemplo, usar o hack abaixo não é mais necessário:

#pinkfloyd {
width
: 200px;
height
: 150px;
position
: absolute;
top
: 50%;
left
: 50%;
margin
-top: -75px; /* half of the height */
margin
-left: -100px; /* half of the width */
}

Agora, com calc()você só precisa fazer isso:

#pinkfloyd {
width
: 200px;
height
: 150px;
position
: absolute;
top
: calc(50% - 75px);
left
: calc(50% - 100px);
}

Apoio, suporte

<br />
– IE9: suporta totalmente
– Google Chrome 19+ e Safari 6+: suporte parcial com -webkit-calc()
– Mozilla Firefox 4+: suporte parcial com -moz-calc()
– Opera: nenhum = /

Entendi? Até mais!