CSS Bootstrap 4 卡片中垂直居中文本无法居中

在本文中，我们将介绍在使用 CSS Bootstrap 4 时，当在卡片（card）中垂直居中文本时出现文本无法垂直居中的问题，并提供解决方案的示例说明。

阅读更多：CSS 教程

问题描述

在使用 CSS Bootstrap 4 创建卡片时，我们经常希望将文本在卡片中垂直居中，以确保视觉上的平衡和美观。然而，在某些情况下，我们可能会发现垂直居中的文本无法实现居中的效果。

这个问题通常发生在我们将文本放置在卡片的头部或脚尾部的位置，并尝试使用 Bootstrap 的类来实现垂直居中。下面是一个示例的卡片代码：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

解决方案

要解决这个问题，我们可以使用一些 CSS 技巧来实现文本在卡片中垂直居中。

方法一：使用 Flexbox

Flexbox 是一种强大的 CSS 布局方法，可以轻松实现垂直居中。我们可以将卡片的容器设置为使用 Flexbox 布局，并使用 align-items: center; 属性来实现垂直居中。下面是修改后的代码：

<div class="card d-flex align-items-center">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

方法二：使用表格布局

另一种方法是使用表格布局来实现垂直居中。我们可以将卡片的容器设置为具有 display: table; 属性，并将内容包装在一个具有 display: table-cell; vertical-align: middle; 属性的 <div> 元素中。下面是修改后的代码：

<div class="card" style="display: table;">
  <div class="card-body" style="display: table-cell; vertical-align: middle;">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

方法三：使用绝对定位

最后一种方法是使用绝对定位来实现垂直居中。我们可以将卡片的容器设置为具有 position: relative; 属性，并将内容包装在一个具有 position: absolute; top: 50%; transform: translateY(-50%); 属性的 <div> 元素中。下面是修改后的代码：

<div class="card" style="position: relative;">
  <div class="card-body" style="position: absolute; top: 50%; transform: translateY(-50%);">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>