bootstrap div居中

可以使用Bootstrap的flexbox布局来实现div居中。下面是一个简单的示例代码：

<div class="d-flex justify-content-center align-items-center">
  <div class="my-div">内容</div>
</div>

在包含要居中的div的父元素上使用`d-flex justify-content-center align-items-center`类，这将使父元素成为一个flex容器，并将其子元素水平和垂直居中。然后，您可以将要居中的div放在父元素内。如果你想让div水平居中，同时保留原本的宽度，可以在`my-div`类上设置`text-center`类，如下所示：

<div class="d-flex justify-content-center align-items-center">
  <div class="my-div text-center">内容</div>
</div>

这将使div文本水平居中。

相关问题

bootstrap div内居中

Bootstrap中的`div`元素想要实现内居中，你可以使用以下几种方法：

1. **Flexbox** 直接法：给包含`div`的容器添加`display: flex; justify-content: center; align-items: center;`样式，这样内容会在水平和垂直方向上都居中。

<div class="container text-center d-flex justify-content-center align-items-center">
    <!-- Your content here -->
</div>

2. **Grid** 方式：如果你使用的是Bootstrap的网格系统（grid），可以将`div`放在一个`row`里，并设置列宽为`auto`以自适应，然后添加`mx-auto`使其居中。

<div class="container mx-auto">
    <div class="row justify-content-center">
        <div class="col-auto text-center">
            <!-- Your content here -->
        </div>
    </div>
</div>

3. **CSS Flexbox 和 Grid 组合**：如果需要兼容老版本浏览器，可以先使用`flex`属性，再添加`text-align: center`使文本居中，结合`justify-content: center`对行内元素居中。

<div class="container">
    <div class="d-flex flex-column justify-content-between align-items-center">
        <!-- Your content here -->
    </div>
</div>

bootstrap div col文字垂直居中

想要在 Bootstrap 的 `div` 中实现文字垂直居中，可以使用以下的 CSS 样式：

.vertical-align {
  display: flex;
  align-items: center;
}

然后，在 `div` 中添加 `vertical-align` 类，就可以实现垂直居中了。

例如，下面的代码片段中，左侧的内容就实现了垂直居中：

<div class="container">
  <div class="row">
    <div class="col-md-6 vertical-align">
      <h1>这里是标题</h1>
      <p>这里是内容</p>
    </div>
    <div class="col-md-6">
      <img src="图片地址" alt="图片">
    </div>
  </div>
</div>

注意，上述样式需要在 Bootstrap 样式之后进行引入，否则可能会被 Bootstrap 样式覆盖。