bootstrap 图片居中

要在 Bootstrap 中实现图片居中，可以使用以下方法：

1. 使用 `mx-auto` 类将图片水平居中，例如：

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <img src="example.jpg" alt="示例图片">
    </div>
  </div>
</div>

2. 将图片包装在一个 `d-flex` 和 `justify-content-center` 的容器中，使其在水平方向上居中，例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="d-flex justify-content-center">
        <img src="example.jpg" alt="示例图片">
      </div>
    </div>
  </div>
</div>

3. 将图片包装在一个 `d-flex` 和 `align-items-center` 的容器中，使其在垂直方向上居中，例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="d-flex align-items-center">
        <img src="example.jpg" alt="示例图片">
      </div>
    </div>
  </div>
</div>

4. 结合以上两种方式，即可实现图片在水平和垂直方向上的居中效果，例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="d-flex justify-content-center align-items-center">
        <img src="example.jpg" alt="示例图片">
      </div>
    </div>
  </div>
</div>

以上是使用 Bootstrap 实现图片居中的基本方法，如果需要更加复杂的布局效果，可以使用 CSS 的 `flexbox` 和 `grid` 布局。