calc()が効かない？: 中の演算子の間にはスペースが必要です

今日のハマりどころ

div要素を中央寄せしようとしてcalc()を使ってやりました

before.css

.example{
  width:300px;
  height:100px;
  top:100px;
  left:calc(50%-300px/2);
}

と書いたら全く反映されなかった。
Developer Toolで確認したらこのleftがInvalid Valueになってた

解決法

ピンとくるまで時間がかかりました。

after.css

.example{
  width:300px;
  height:100px;
  top:100px;
  left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/
}

はい、演算子との間にはスペースが要るんです。
他ファンクションでどうなるかは不明。

=====

【追記】2015-04-08

だいぶ前の記事ですが割と見て頂いてびっくりです。
Twitterで言及されていたのですが、
+, -には スペースが必要 で、*,/ には スペースが不要 なのだそうです。
参考：
1. https://twitter.com/terkel/status/553464271862902785
2. http://www.w3.org/TR/css3-values/#calc-syntax

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.

しかしややこしいのでのですべての演算子でスペース入れるようにしてます。