How to Center Text in CSS?

How to Center Text in CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 4 mins read

In this tutorial, we will explore different methods of centering text in CSS. Centering text can enhance the visual appeal of your website and make it easier to read. By the end of this tutorial, you'll be able to center text using various CSS techniques.

Center Text Horizontally

There are multiple ways to center text horizontally in CSS. We will look at some of the most common methods below.

Using the text-align Property

The text-align property is the most straightforward method of centering text horizontally within an element. This property works for inline and inline-block elements.

Here's an example of centering text using the text-align property:

<!DOCTYPE html>
<html>
  <head>
    <title>Text-align Example</title>
    <style>
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p>This text is centered horizontally.</p>
  </body>
</html>

In the example above, we've set the text-align property to center for the <p> element, which centers the text within the element.

Center Text Vertically

Centering text vertically can be more challenging than centering it horizontally. However, there are several methods to achieve vertical centering in CSS.

Using Flexbox

Flexbox is a modern CSS layout module that makes it easy to align items both horizontally and vertically. To center text vertically using Flexbox, follow these steps:

  1. Set the container element's display property to flex.
  2. Set the container element's align-items property to center.

Here's an example of centering text vertically using Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Vertical Centering Example</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>This text is centered vertically.</p>
    </div>
  </body>
</html>

In the example above, we've set the display property to flex and the align-items property to center for the container element, which centers the text vertically within the container.

Center Text Both Horizontally and Vertically

To center text both horizontally and vertically, you can combine the methods mentioned above.

Using Flexbox

With Flexbox, you can center text both horizontally and vertically by applying the following properties to the container element:

  1. Set the display property to flex.
  2. Set the align-items property to center.
  3. Set the justify-content property to center.

Here's an example of centering text both horizontally and vertically using Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Centering Example</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>This text is centered both horizontally and vertically.</p>
    </div>
  </body>
</html>

In the example above, we've set the display, align-items, and justify-content properties for the container element, which centers the text both horizontally and vertically within the container. Below is an live example:

See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.

Using CSS Grid

CSS Grid is another modern layout module that enables you to create complex layouts with ease. To center text both horizontally and vertically using CSS Grid, follow these steps:

  1. Set the container element's display property to grid.
  2. Set the container element's align-items property to center.
  3. Set the container element's justify-items property to center.

Here's an example of centering text both horizontally and vertically using CSS Grid:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid Centering Example</title>
    <style>
      .container {
        display: grid;
        align-items: center;
        justify-items: center;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>This text is centered both horizontally and vertically.</p>
    </div>
  </body>
</html>

In the example above, we've set the display, align-items, and justify-items properties for the container element, which centers the text both horizontally and vertically within the container.

FAQs

Q: Which method should I use to center text in CSS?

A: It depends on your requirements and the browser support you need. The text-align property is the simplest method for centering text horizontally. For vertical centering or centering in both directions, Flexbox and CSS Grid are more powerful and flexible options.

Q: Can I use JavaScript to center text in CSS?

A: Yes, you can use JavaScript to modify the styles of an element to center text. However, it's generally recommended to use CSS for styling and layout tasks, as it is more efficient and easier to maintain.

Q: How do I center text within an element of unknown width or height?

A: Flexbox and CSS Grid are excellent solutions for centering text within an element of unknown dimensions, as they automatically handle the alignment of the content based on the available space.