CSS3のたった1行で要素を中央寄せにする裏ワザ

CSS3で中央寄せの技は数あれど

これまでのCSS界（そんなものあるのかは知らない）では、TRBLメソッドやネガティブマージンなどを用いてモーダルなどの中央寄せを実現してきました。
幅や高さが固定でない要素に対しては、ネガティブマージン指定以外にも

div {
  position: absolute;
  top; 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

とする方法もあります。

実装したいデザインによるのですが、モーダルの幅や高さは固定なのか？スタイルをあてるコンポーネントは複数種類あるのか？という問題などにあわせて、都度いずれかの方法を選択していました。

で、今回はこちらのQiita記事を見つけて血が騒ぎ挑戦してみました。

要素の幅や高さが決まっていなくてもウィンドウの中央寄せにできる1行がこちらです。

transform: translate(calc(50vw - 50%),calc(50vh - 50%));

実際のサンプルがこちら。

いや～transformが1行で済むようになってありがたいですね。
vwやvhも本当に便利です。
vminやvmaxとcalc()を組み合わせれば、幅と高さもわりと自由に設定できますしね。

えっ？レガシーブラウザ対応したい？ごめんね☆（ゝω・）v

記事にコメントしたとおり、ページ内にほかの要素があれば、当然ウィンドウの中央に置けないので、position指定で絶対配置や固定する必要があります。
じゃあ厳密にはそれって1行で実現できてないんじゃないの…と思うので、これ以上の方法があるぞ！という方はぜひ記事のほうにコメントしてくださいね。

ウィンドウの中央ではなく、特定の親要素の中で中央寄せにしたい！ということであれば、記事にある方法で大丈夫です。
いずれにしろ親要素にposition:relative;を指定しないといけないから、やっぱり1行とは言えないんじゃないの…と思わなくもないですが…