如何在 CSS 中的列中心显示标题

在 Web 开发中，经常需要在页面中显示标题。其中一种布局方式是将标题放置在列的中心。这种布局方式在响应式 Web 设计中特别有用，因为它可以让您的网站在不同屏幕大小上显示良好。

下面是如何在 CSS 中的列中心显示标题的步骤：

步骤 1：创建 HTML 结构

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <h2>标题</h2>
    </div>
  </div>
</div>

请注意，我们使用了 Bootstrap 栅格系统的类名来创建这个结构。这些类名可以让我们方便地布局和定位 HTML 元素。

步骤 2：编写 CSS 样式

.container {
  padding-top: 50px;
  padding-bottom: 50px;
}

通过添加 padding，我们可以给容器留出足够的空间来放置标题。

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

以下是对 CSS 样式的解释：

• display: flex; 让行元素变成弹性元素.
• justify-content: center; 将列元素水平居中对齐.
• align-items: center; 将列元素垂直居中对齐.
• height: 100%; 让行元素填充列元素的高度.

步骤 3：总结

现在，您已经学会了如何在 CSS 中的列中心显示标题。这种布局方式适用于许多不同的情况，无论是简单的网站还是复杂的 Web 应用程序。

下面是完整的 HTML 和 CSS 代码片段：

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <h2>标题</h2>
    </div>
  </div>
</div>

.container {
  padding-top: 50px;
  padding-bottom: 50px;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}