How to center text

Centering text is a common task in web design, and there are several ways to achieve it. This article will show you how to center text using CSS and Bootstrap. We'll provide ready-to-use examples to make it easy for you to integrate them into your projects.

Center Text with Bootstrap

How It Works:

  • The text-center class in Bootstrap automatically sets the text-align: center; property for the element, centering the text horizontally.

This text is centered using Bootstrap. 
        
            
        <div class="text-center">
          This text is centered using Bootstrap.
        </div>

Center Text with Bootstrap Flexbox

How It Works:

  • d-flex makes the container a flexbox.
  • justify-content-center centers the content horizontally.
  • align-items-center centers the content vertically.
  • h-25 makes the container take up 25% of the viewport height.

This text is centered using Bootstrap. 
        
            
        <div class="d-flex justify-content-center align-items-center h-25">
          This text is centered using Bootstrap.
        </div>

Center Text with CSS

The text-align: center; style centers the text horizontally within its container.

This text is centered using CSS. 
        
            
          <div style="text-align: center;">
            This text is centered using CSS.
          </div>

Center Text with Flexbox

How It Works:

  • display: flex; creates a flex container.
  • justify-content: center; centers the content horizontally.
  • align-items: center; centers the content vertically.
  • height: 25vh; Makes the container take up 25% of the viewport height.

This text is centered using Flexbox. 
        
            
        <div style="display: flex; justify-content: center; align-items: center; height: 20vh;">
          This text is centered using Flexbox.
        </div>