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!