如何使Bootstrap SVG图标居中？

要使Bootstrap SVG图标居中，可以使用以下方法：

使用Flexbox布局：将SVG图标包裹在一个容器内，给容器设置display: flex; 和 justify-content: center; 的样式，这将使图标水平居中。

<div style="display: flex; justify-content: center;">
  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"/>
  </svg>
</div>

使用text-align属性：将SVG图标包裹在一个块级元素内，给该元素设置text-align: center; 的样式，这将使图标水平居中。

<div style="text-align: center;">
  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"/>
  </svg>
</div>

以上两种方法都可以使SVG图标水平居中，根据实际情况选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：