position: absolute;した要素が中央からずれる件を調整する

何かの要素を画面のど真ん中に配置したいとき。
今回はタイトル下のダイヤマークなのですが、これにleft: 50%;とかやっても、ちょっとだけ右寄りになってしまう。

CSSの内容は下記の通りです。

h1::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #BDA887;
    transform: rotate(45deg);
    bottom: -10px;
    left: 50%; /*真ん中に表示するための指定*/
}

画面全体のスペースを100%として、そこから50%だけ位置を移動させれば、理論上はど真ん中配置になるはず。
じゃあなんでそうならんの？？と言うと、要素を移動させるときの座標計算に『動かしたい要素の左上を基準点にする』というルールがあるせいです。
要素の中心から計算して動いてくれたら楽なんだけど…
なので、一文だけ命令を追加してあげます。

transform: translate(-50%, 0);

これは要素自体の面積と同じ分だけ、要素の位置を左に動かすための記述。
さきほどのCSSに追加するとこうなります。
（今回はすでにtransform()関数を使っているので、rotateプロパティの後ろにtranslateを追記します）

h1::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #BDA887;
    transform: rotate(45deg) translate(-50%, 0);
    bottom: -10px;
    left: 50%;
}

喉のつかえが取れた気分です！