How to vertically center text using CSS?

Updated On: 2024-06-09

Learn how to vertically center text using CSS

Method 1: Using Flexbox

 <style>
 .container {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional: To center horizontally as well */
  height: 200px; /* Adjust as needed */
  width:100%;
  border:1px solid green;

}

</style>
<div class="container">
<h2>Vertically center text </h2>
</div>

Method 2: Using Grid

<style>
 .container {
  display: grid;
  place-items: center;
  height:200px; /* Adjust as needed */
  width:100%;
  border:1px solid green;
}

</style>
<div class="container">
<h2> Vertically center text</h2>
</div>

Method 3: Using Line-Height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line-Height Centering</title>
    <style>
        .container {
            height:200px; /* Adjust as needed */
            width:100%;
            text-align:center;
           
        }
        .text {
             height:200px; /* Adjust as needed */
            width:100%
            border:1px solid green;
            vertical-align: middle;
            display: inline-block;
            color:black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Vertically Centered Text</h2></div>
    </div>
</body>
</html>

Method 4: Using Table Display

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Display Centering</title>
    <style>
        .container {
            display: table;
            width: 100%;
            height: 200px;
            text-align:center;
        }
        .text {
            display: table-cell;
            vertical-align: middle;
            text-align: center; /* Optional: To center horizontally as well */
            color: purple;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Table Display Centering</h2></div>
    </div>
</body>
</html>

Method 5: Using Positioning

 
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning Centering</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 200px;
            text-align:center;
            border:1px solid green;
        }
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color:black;
            font-size:20px;
            
           
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Positioning Centering</h2></div>
    </div>
</body>
</html>

Method 6: Using CSS Variables and Calc

 
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Variables and Calc Centering</title>
    <style>
        .container {
            width: 100%;
            height: 200px; /* Adjust as needed */
            position: relative;
        }
        .text {
            position: absolute;
            top: calc(50% - var(--offset, 0px));
            left: 50%;
            transform: translate(-50%, -50%);
            color: teal;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>CSS Variables and Calc Centering</h2></div>
    </div>
</body>
</html>

Method 7: Using Inline Block and Pseudo-Element

 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Block and Pseudo-Element Centering</title>
    <style>
        .container {
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .container::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .text {
            display: inline-block;
            vertical-align: middle;
            color:black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Inline Block and Pseudo-Element Centering</h2></div>
    </div>
</body>
</html>

Method 8: Using Vertical Flexbox Alignment

 
    
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Flexbox Alignment</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .text {
            text-align: center; /* Optional: To center horizontally as well */
            color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Vertical Flexbox Alignment<h2></div>
    </div>
</body>
</html>

Method 9: Using Vertical Flexbox Alignment (Centered Column)

 
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Flexbox Centered Column</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; /* Optional: To center horizontally as well */
            width: 100%;
            height: 200px;
            text-align:center;

        }
        .text {
            color:black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Vertical Flexbox Centered Column</h2></div>
    </div>
</body>
</html>

Method 10: Using Multi-Column Layout

 
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Column Layout Centering</title>
    <style>
        .container {
            column-count: 1;
            column-gap: 0;
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .text {
            display: inline-block;
            vertical-align: middle;
            color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Multi-Column Layout Centering</h2></div>
    </div>
</body>
</html>

Method 11: Using Transform and Negative Margin

 
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform and Negative Margin Centering</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 200px;
            text-align:center
        }
        .text {
            position: absolute;
            top: 50%;
            margin-top: -10px; /* Adjust based on text height */
            left: 50%;
            transform: translateX(-50%);
            color: darkorange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>Transform and Negative Margin Centering</h2></div>
    </div>
</body>
</html>

Method 12: Using CSS Grid and Align Self

 
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid and Align Self Centering</title>
    <style>
        .container {
            display: grid;
            width: 100%;
            height: 200px;
            text-align:center;
        }
        .text {
            align-self: center;
            justify-self: center; /* Optional: To center horizontally as well */
            color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text"><h2>CSS Grid and Align Self Centering</h2></div>
    </div>
</body>
</html>

Related Resources

For more information, you can use the following resources:

How do I vertically center text with CSS at Stackoverflow

How to Vertically Center Text with CSS at Geeksforgeeks

How to Center Text Vertically with CSS at FreeCodeCamp

How To

How to vertically center text using CSS?

Method 1: Using Flexbox

Method 2: Using Grid

Method 3: Using Line-Height

Method 4: Using Table Display

Method 5: Using Positioning

Method 6: Using CSS Variables and Calc

Method 7: Using Inline Block and Pseudo-Element

Method 8: Using Vertical Flexbox Alignment

Method 9: Using Vertical Flexbox Alignment (Centered Column)

Method 10: Using Multi-Column Layout

Method 11: Using Transform and Negative Margin

Method 12: Using CSS Grid and Align Self

Related video

Related Resources

How To

How to vertically center text using CSS?

Method 1: Using Flexbox

Method 2: Using Grid

Method 3: Using Line-Height

Method 4: Using Table Display

Method 5: Using Positioning

Method 6: Using CSS Variables and Calc

Method 7: Using Inline Block and Pseudo-Element

Method 8: Using Vertical Flexbox Alignment

Method 9: Using Vertical Flexbox Alignment (Centered Column)

Method 10: Using Multi-Column Layout

Method 11: Using Transform and Negative Margin

Method 12: Using CSS Grid and Align Self

Related video

Related Resources

Related Reads