如何在 Bootstrap 中设置垂直对齐？

垂直对齐借助垂直对齐实用程序更改元素的垂直对齐方式。垂直对齐实用程序仅影响内联（在一行中显示）、内联块（在一行中显示为块）、内联表格和表格单元格（表格单元格中的元素）元素。 div 的垂直对齐是响应式网页最基本的要求之一。这可以通过 CSS 实现，但 Bootstrap 库有一些专门为此目的构建的类。在本文中，我们将学习 Bootstrap 中用于垂直对齐的可用类和方法。请参考 Bootstrap 中的垂直对齐和其他垂直对齐类的示例。

在这里，我们将讨论 2 个内置类：

• 使用类align-items-center
• 使用类d-flex和类align-items-center

让我们通过例子来理解这两个类。

方法一：使用类align-items-center

在 Bootstrap 5 中，如果我们想在中心垂直对齐

元素，我们可以通过在该 div 的包含元素上应用类 align-items-center 来实现。

例子：

输出：

方法 2：使用类d-flex和类align-items-center

在 Bootstrap 5 中，如果我们想垂直对齐包含元素中间的

元素，我们可以通过在该 div 的包含元素上应用类align-items-center和d-flex来实现。在这里， d-flex类和 display 的作用是一样的： flex; CSS 中的属性。

例子：

HTML

  
    
    
  
    
  
    
    
    
    
    
    
  
  
  
    
      
        GeeksforGeeks
      
    
  

输出：