让div 中的文字垂直居中

要让 div 中的文字垂直居中，可以使用 CSS 的 flexbox 或者 grid 布局来实现。下面是两种方法的示例代码：

使用 flexbox 布局：

<div class="container">
  <div class="content">
    <p>这是垂直居中的文字</p>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 设置容器的高度 */
}

.content {
  text-align: center;
}

使用 grid 布局：

<div class="container">
  <div class="content">
    <p>这是垂直居中的文字</p>
  </div>
</div>

.container {
  display: grid;
  place-items: center;
  height: 300px; /* 设置容器的高度 */
}

.content {
  text-align: center;
}

这两种方法都使用了容器的高度来实现垂直居中，你可以根据实际需求调整容器的高度。

相关问题

div内文字垂直居中

在HTML中，要让div内的文字垂直居中，可以采用几种常见的方法：

1. **CSS Flexbox**: 如果你的浏览器支持Flexbox，可以给包含元素设置`display: flex; justify-content: center; align-items: center;`，这样内容会在主轴和交叉轴上都居中对齐。

<div class="centered-text">
  这里是垂直居中的文本
</div>

<style>
.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2. **CSS Grid**: 类似于Flexbox，如果使用Grid布局，也可以将垂直居中作为样式之一。

<div class="centered-text">
  这里是垂直居中的文本
</div>

<style>
.centered-text {
  display: grid;
  place-items: center;
}
</style>

3. **使用CSS表单单元格** (表格布局)：如果你的页面布局更接近表格形式，可以利用`<table>`、`<tr>`、`<td>`等元素配合CSS来实现。

<table>
  <tr>
    <td style="vertical-align: middle;">
      这里是垂直居中的文本
    </td>
  </tr>
</table>

4. **传统方法：line-height 和 padding**：对于纯文本的居中，还可以设置`line-height`等于`height`，然后添加外部padding使边距与行高相匹配。

<div class="centered-text" style="line-height: 50px; padding-top: 25px;">
  这里是垂直居中的文本
</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 样式覆盖。