SVG画像の中央配置について教えていただきたいです。

Question

### 実現したいこと
円の背景の上にsvg画像をのせて中央配置にしたいです。

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

円の背景はリンクになっていて、hoverすると円の色が変わるようにしています。
そのためsvg画像を<svg><path・・・></svg> のようにそのままhtmlに貼り付けています。
添付のようなコードを記述して中央寄せになりませんでした。
お忙しいところすみませんが、教えていただけると嬉しいです。よろしくお願いいたします。

該当のソースコード

html
<li class="sns-list">
　<a href="#">
      <svg class="sns-icon instagram-icon" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><path   ・・・"></svg>
　</a>
</li>

css
.sns-list{
  background:#2F2F2F;
  border-radius: 50%;
  width:50px;
  height: 50px;
  position:relative;
}

.sns-list:hover{
    background:#fff;
    border: 2px solid #2F2F2F;
  }

.sns-list  a{
  display:inline-block;
  }

.sns-icon{
  display:inline-block;
  fill:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.sns-list:hover .sns-icon{
  fill: #2F2F2F;
  transition: all .3s ease 0s;
}

試したこと・調べたこと

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

上記の詳細・結果

ネットで調べて.sns-listに対してtext-align:center;や　display:flex; 、justify-content:center; 、align-items:center;を入れてみましたが中央よせになりませんでした。

補足

<path>のコードは長いので省略しています。

Comments

[Lhankor_Mhy]

当方で試してみましたが、できているように見えました。

[kuro]

https://xfs.jp/KZ8MVZ の添付のような感じになってしまいます。この場合はpaddingなどで調整するしかないのでしょうか？

[Lhankor_Mhy]

画像は質問に張り付けることができます。

[Lhankor_Mhy]

SVGが提示されていないので想像になりますが、そのSVG自体が中央からずれているのかもしれません。
いちおう、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/L9zmfbap/

[kuro]

サンプルありがとうございます。もう一度確認してみます。

[kuro]

svgに少し余白があったようで、もう一度書き出したらうまく中央配置されました。助かりました。ありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが、自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

svgに余白があったため、中央配置できていなかった。