CSSで円のセンターにテキストを配置する

昔一度投稿した気がしなくもないんですが、見つからなかったので投稿しておきます。
テキストをDOMに対し上下左右中央寄せしたい場合はわりと頻繁に出てきますが、そのDOMが円だった際の対策です。

円の外接四角形に対しテキストを上下左右中央寄せすると行数によってははみ出してしまうため、
内接四角形に対して上下左右中央寄せするのがおすすめです。
今回はSCSSで内接四角形を計算し、センタリングを行いました。

HTML

<div class="circle"><!--円-->
  <div class="inner"><!--内接四角形-->
    <div class="box">
      <div contenteditable="true" class="txt">HELLO WORLD</div>
    </div>
  </div>
</div>

SCSS

%circle {
  $size : 300px; // 円の直径
  // border: solid #000 1px; // 今回は線を引かなかったためコメントアウト
  border-radius: 50%;
  width: $size; height: $size;

  .inner { // 内接四角形
    margin: ($size - $size / 1.41) / 2;
    width: $size / 1.41; height: $size / 1.41;
    overflow: hidden;
  }

  .box {
    display: table;
    width: 100%; height: 100%;
  }

  .txt {
    display: table-cell;
    width: 100%; height: 100%;
    text-align: center;
    vertical-align: middle;
    
    &:focus {
      outline: none;
    }
  }
}