如何使用Bootstrap让文本在响应式布局中始终居中对齐

你的问题出在布局对齐逻辑上：桌面端两列时，col-lg-6搭配d-flex justify-content-center能让内部容器在50%宽度的列里居中，显示正常；但移动端单列时，列宽度变为100%，内部容器因内容长度不同各自宽度不一，flex居中后视觉上就出现了错位。

修复方案 #

直接给文本容器添加text-center类，让文本本身相对于容器居中，替代列上的flex居中逻辑，这样无论桌面还是移动端，文本都会保持统一的居中对齐：

<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <link href="test.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="text-center">
          text<br/>
          short text<br/>
          long text<br/>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="text-center">
          another text<br/>
          another short text<br/>
          another long text<br/>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

原理说明 #

• text-center是Bootstrap内置类，会给元素设置text-align: center，让内部文本直接居中，不受容器宽度影响。
• 移除列上的d-flex justify-content-center，避免因内部容器宽度差异导致的视觉错位，同时保持布局简洁。

内容的提问来源于stack exchange，提问作者NicoSan