CSSだけで要素を垂直中央に配置しつつ、あふれたらスクロールできるようにする

JSを使わずにCSSだけで要素をページの真ん中に配置するという方法はいろいろある。
けど、その要素の中身の高さが、親の高さを超えてしまうと、その上部分が見切れてしまうというパターンが多い。
そういう場合はJSを使って位置を調整することが多いけど、CSSだけで解決できそうな気がしたのでやってみた。

.center {
  position: fixed;
  right: 50%;
  bottom: 50%;
  width: calc(100% - 20px);
  max-width: 600px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  transform: translate(50%,50%);
}

Element in the vertical center where you can scroll

これで、.centerの中身が少ないときは垂直中央に、.center自身の高さを上回ったときにはスクロールできるようになる。
ポイントは、max-widthとmax-heightで最大の大きさを指定しつつ（100%以下にする）、overflowではみ出したらスクロールできるようにしてること。
IEではまだ試してない。