How To Vertically Center Text In Html

by

Vertically centering text in HTML can be a bit tricky, but with the right CSS properties, you can achieve it easily. In this blog post, we will go through a few different methods to vertically center text in HTML.

Method 1: Using Flexbox

Flexbox is a powerful CSS layout module that makes it easier to design flexible and responsive layouts. To vertically center text using Flexbox, follow these steps:

  1. Create a container element and add the text inside it.
  2. Apply the following CSS styles to the container element: 
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Here’s an example of how to use Flexbox to vertically center text:




    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>


    <div class="container">
        <p>Vertically centered text</p>
    </div>

Method 2: Using Grid Layout

Another way to vertically center text in HTML is by using the CSS Grid Layout. Here’s how:

  1. Create a container element and add the text inside it.
  2. Apply the following CSS styles to the container element: 
    .container {
    display: grid;
    align-items: center;
    height: 100vh;
}

Here’s an example of how to use Grid Layout to vertically center text:




    <style>
        .container {
            display: grid;
            align-items: center;
            height: 100vh;
        }
    </style>


    <div class="container">
        <p>Vertically centered text</p>
    </div>

Method 3: Using the “transform” Property

You can also use the “transform” property to vertically center text in HTML. Here’s how:

  1. Create a container element and add the text inside it.
  2. Apply the following CSS styles to the container element: 
    .container {
    position: relative;
    height: 100vh;
}
.centered-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Here’s an example of how to use the “transform” property to vertically center text:




    <style>
        .container {
            position: relative;
            height: 100vh;
        }
        .centered-text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>


    <div class="container">
        <p class="centered-text">Vertically centered text</p>
    </div>

And there you have it! Three different methods to vertically center text in HTML. Choose the one that best suits your needs and happy coding!