如何使用 CSS 在 flexbox 内垂直对齐文本？

CSS flexbox：CSS 中的 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的组合。用于设置灵活项目的长度。 flex 属性响应迅速且移动友好。很容易定位子元素和主容器。边距不会与内容边距一起折叠。无需编辑 HTML 部分即可轻松更改任何元素的顺序。 flexbox 几年前被添加到 CSS 标准中，用于管理空间分布和元素对齐。基本上它是一维布局语法。

垂直居中： flexbox 属性用于设置内容垂直居中。通过设置以下显示属性，文本内容可以垂直对齐：

• 对齐项目
• 证明内容
• flex-direction

align-items 和 justify-content 是使文本水平和垂直绝对居中的重要属性。水平居中由 justify-content 属性管理，垂直居中由 align-items 属性管理。

示例 1：本示例设置文本内容垂直居中对齐。

  

    
      
    
    

  

    

        
GeeksforGeeks
        
Vertically align text using Flexbox
    

  

输出：

示例 2：此示例说明如何使用 CSS 在 flexbox 中垂直设置左对齐文本。

  

    
      
    
    

  

    

        
GeeksforGeeks
      
        
    

  
                    

输出：