Center text vertically and horizontally

Tailwind CSS Center text vertically and horizontally

Use responsive center text vertically and horizontally utilities with TW elements. Easy way to center text vertically and horizontally.

Basic example

Use the .flex class then the .items-center class to center the text vertically and the .justify-center class to center the text horizontally.

Text centered vertically and horizontally.

HTML

        
            
        <div class="... flex items-center justify-center">
          <p>Text centered vertically and horizontally.</p>
        </div>

Basic example

To vertically align text, you can use the .flex and .items-center classes to align the text vertically in the center of its container.

Text centered vertically.

HTML

        
            
        <div class="... flex items-center">
          <p>Text centered vertically.</p>
        </div>

Center text vertically and horizontally

Tailwind CSS Center text vertically and horizontally

Basic example

Basic example

Access restricted

To view this section you must have an active PRO account

Center text vertically and horizontally

Tailwind CSS Center text vertically and horizontally

Basic example

Basic example

Related resources