丸円の真ん中に数字を表示したいが、Safariだと上に若干ずれてしまう

実現したいこと

丸円の中に通知数を表示する通知バッジを作成したいです。

発生している問題・分からないこと

Mac Chromeでは想定通り表示できているが、Safariだと若干数字の位置が上にずれてしまう。
なぜ、ずれてしまうのか原因と解決策を知りたいですmm

・Mac Chrome

・Mac Safari

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      .circle {
9        width: 30px;
10        height: 30px;
11        font-size: 16px;
12        line-height: 30px;
13        text-align: center;
14        color: white;
15        background: red;
16        border-radius: 50%;
17      }
18    </style>
19  </head>
20  <body>
21    <div class="circle">1</div>
22  </body>
23</html>
24

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

line-heightの調整やflexを使って中央寄せにしようとも試みましたが、うまくいきませんでした。

補足

特になし

naomina121

2024/03/10 00:08

https://nabewakashi.com/up-and-down-the-center transformやcalcを使用した記事です。こちらではうまくいきませんか？

YT0014

2024/03/10 07:53

画像を見る限り異なるフォントのようなので、フォント指定で改善されるかもしれません

行動規範の内容に同意します

回答1件

FlexかGridで中央配置したらどうでしょうか。

css
1.circle {
2  width: 30px;
3  height: 30px;
4  font-size: 16px;
5  color: white;
6  background: red;
7  border-radius: 50%;
8  display: grid;
9  place-content: center; 
10}