フロントページの調整（transform()関数を使ったレスポンシブ中央寄せ）

position: absolute;とrelative;を使ったごくごくシンプルな構成のこの部分。
テキストを収めたブロック要素を水平・垂直共にど真ん中に配置したい。

ので、やはりシンプルにこういう指定にしました。

HTML

<div class="wrap">
  <div class="circle">
    <div>テキスト</div>
  </div>
</div>

CSS

.wrap{
    width: 60%;
    border-radius: 50%;
}
.circle {
    position: relative;
    padding-top: 100%;
    height: 0;
}
.circle div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
}

当初はcalc() 関数で計算してたけど、レスポンシブ対応ならtransform関数の方がメンテナンス性がよかったので…（複雑な配置でもないし）
Flexboxでもよかったのかな？
今度そっちも試してみたいです。