◆ 75 か 76 での変更
◆ margin-left で指定した px の半分しかずれなくなった
  ◆ 他のスタイルと組み合わせた特定状況の場合のみ
◆ inline-block のときだけ
◆ Firefox は今の Chrome と同じだけど block の場合も半分しかずれない

Chrome 77 のアップデート後に気づいたので 77 の問題かなと思ったのですが 調べてみると 76 でも同じだったので少し前からのようです
74 で試すと期待通りに動いてたので 75 か 76 からの問題です
75 の環境は手元になかったので確かめれてません

こういう HTML があります

<!doctype html>
<style>
.box {
width: 50px;
height: 50px;
margin: 30px 100px;
position: relative;
}
.square {
width: 100%;
height: 100%;
background: skyblue;
}
.text-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.text {
margin-left: calc(-50% + 25px);
background: lightgreen;
}
.ib {
display: inline-block;
}
</style>

<div class="box">
<div class="square"></div>
<div class="text-wrapper">
<div class="text">XXXXXXXXXXX</div>
</div>
</div>

<div class="box">
<div class="square"></div>
<div class="text-wrapper">
<div class="text ib">XXXXXXXXXXX</div>
</div>
</div>

正方形があって その中心に文字を配置します
文字は正方形を基本的にはみ出します
左右を中央に配置するために margin-left を使ってます

.box が 2 つあって違いは .text が block か inline-block かの違いです

Chrome 74 で表示するとこうなってました

ml-c74l

どっちも文字は中央揃えにできてますが block だと横幅が広がってました
背景色をつけた場合に見た目が良くないので inilne-block にして対応していました

それが 76 では

ml-c76

inline-block の場合のみ左にずれてます
このせいで中央揃えできません

中央揃えのための margin-left はこうなってます

	margin-left: calc(-50% + 25px);

25px は正方形の 1 辺の半分です
正方形の大きさによって変えるものです
この px を 10px 増やして 35px にすると calc された結果も 10px ずれるはずです
ですが devtools で確認すると 10px 動かしても半分の 5px しか動いてませんでした
他の数値にしても指定の半分しか動いてません
左右それぞれで半分?にしてもなんかおかしいです

Chrome の変更はときどき標準からずれてたのを標準に合わせるため とか言ってたりもするので Firefox でも確認してみました
すると Chrome と同じようにずれてはいる……のですが block と inline-block 両方ともです
どちらでも中央揃えできず左に寄ってます

ml-f69

Firefox でも左に寄ってる以上 Chrome のバグとも言い切れないわけですが 半分しかずれないという変な動きが正しいというのは理解できないです
margin-left より tranform で translateX 指定したほうがよさそうですね
実際には別の用途ですでに transform を使っていて 分けるために margin-left にしてたのですけど 仕方ないです

最近は毎回のように Chrome のアップデートによるバグなのか仕様変更なのかの影響を受けてる気がします
既存ページが壊れるような変更はやめてもらいたいものです