#1 Spot for Defeating Online Exams

how-to-vertically-center-text-with-css?

Response: You can align text vertically by utilizing the Flexbox layout.

HTML (Hypertext Markup Language) is employed to establish the framework of a webpage. Centering text vertically on the webpage is crucial for maintaining visual equilibrium, directing attention, and enhancing the legibility of content. There are several additional properties that can be employed to vertically align text, including absolute positioning, display, and line-height. We will explore these approaches in depth in this article.

Table of Contents:

Approaches to Vertically Center the Text with CSS

Numerous CSS properties can be used to center text vertically. Here are some effective methods that you can implement to vertically align text.

Approach 1: Utilizing CSS Flexbox to Vertically Center the Text with CSS

CSS flexbox can be applied to align text vertically. This layout distributes space among the items within the container.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Centering Example</title>
  <style>
    .container {
      display: flex;
      justify-content: center; 
      align-items: center;
      height: 100px; 
      width: 30%; 
      border: 1px solid #000;
    }
    .text {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">Vertically Centered Text</div>
  </div>
</body>
</html>

Output:

Using CSS Flexbox to Vertically Center the Text with CSS

Explanation: The div is constructed using Flexbox, centering the text vertically and providing equal space between items.

Approach 2: Using the Display Property to Vertically Center the Text with CSS

You can establish a container div with display: table, and include a text div set to display: table-cell. This arrangement will allow for vertical centering of the text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Property Centering</title>
  <style>
    .container {
      display: table;
      width: 30%;
      height: 100px;
      border: 1px solid #000;
    }
    .text {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">Vertically Centered Text</div>
  </div>
</body>
</html>

Output: 

Using the Display Property to Vertically Center the Text with CSS

Explanation: This HTML markup constructs the container utilizing a display: table. The inclusion of text-align: center ensures the text is aligned centrally.

Approach 3: Employing CSS Grid Layout to Vertically Center the Text with CSS

A CSS grid layout can be utilized to achieve vertical text centering. This layout offers a two-dimensional grid.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Centering</title>
  <style>
    .container {
      display: grid;
      place-items: center; /* Align items both horizontally and vertically */
      width: 30%;
      height: 100px; /* Reduced height */
      border: 1px solid #000;
    }
    .text {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">VerticallyCentered Text</div>
  </div>
</body>
</html>

Result:

Utilizing CSS Grid Layout to Vertically Center the Text with CSS

Clarification: CSS Grid is employed to construct the div and to achieve vertical centering of the text.

Approach 4: Implementing line-height Property to Vertically Center the Text with CSS

The line-height property can be utilized to center text vertically, particularly advantageous for single-line text. This technique also aids in regulating the spacing between text lines.

Illustration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Illustrative Example</title>
  <style>
    .container {
      height: 100px;
      width: 30%;
      border: 1px solid #000;
      text-align: center;
      line-height: 100px; 
    }
    .text {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="container">
    <span class="text">Vertically Centered Text</span>
  </div>
</body>
</html>

Result:

Utilizing line-height Property to Vertically Center the Text with CSS

Clarification: The height of the div is set and the line-height property is utilized to center the text.

Approach 5: Uniform Padding at the Top and Bottom to Vertically Center the Text with CSS

By applying equal padding to the upper and lower sections of the container, you can achieve vertical centering of the text. This technique is effective for containers with fixed heights.

Illustration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding Centering Illustrative Example</title>
  <style>
    .container {
      height: 50px;
      width: 30%;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 0; 
    }
    .text {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="container">
    <span class="text">Vertically Centered Text</span>
  </div>
</body>
</html>

Result:

Uniform Top and Bottom Padding to Vertically Center the Text with CSS

Clarification: This code establishes a div, defining the container’s height and width. Padding is applied to center the text.

Approach 6: Employing Absolute Positioning and Negative Margins to Vertically Center the Text with CSS

You can vertically center the text by applying position: absolute with values for top, left, right, and bottom along with negative margins.

Illustration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Positioning</title>
  <style>
    .container {
      position: relative;
      height: 100px;
      width: 30%;
      border: 1px solid #000;
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">Vertically Centered Text</div>
  </div>
</body>
</html>

Result:

Employing Absolute Positioning and Negative Margin to Vertically Center the Text with CSS

Clarification: The container is established with relative positioning while the text is centered vertically.

Approach 7: Utilizing Table Layout with Padding to Vertically Center the Text with CSS

This method integrates the display: table property along with padding to achieve text centering. This technique is also suitable for multi-line text.

Illustration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Centering via Table Layout and Padding</title>
  <style>
    .container {
      display: table;
      width: 30%;
      height: 100px;
      padding: 0 10px;
      border: 1px solid #000;
    }
    .text {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">Vertically Centered Text</div>
  </div>
</body>
</html>

Result:

Utilizing Table Layout with Padding to Vertically Center the Text with CSS

Clarification: The div has been created utilizing a table layout and padding. The table-cell along with text-align: center is applied to vertically center the text.

Approach 8: Implementing Absolute Positioning with position: sticky to Vertically Center the Text with CSS

Text can be vertically centered using position: absolute alongside transform: translate(-50%, -50%), while position: sticky is utilized to anchor an element.

Illustration:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Centering via Absolute Positioning</title>
  <style>
    .container {
      position: sticky;
      height: 100px;
      width: 30%;
      border: 1px solid #000;
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="text">Vertically Centered Text</div>
  </div>
</body>
</html>

Result:

Using Absolute Positioning with position: sticky to Vertically Center the Text with CSS

Clarification: In this code, the transform property centers the text vertically.

Final Thoughts

CSS properties can be utilized to achieve vertical centering of text. Both Flexbox and Grid layouts effectively align text and evenly distribute space. The methods discussed above represent the most effective means of vertically centering text.

Commonly Asked Questions

The article How to Vertically Center Text with CSS? was first featured on Intellipaat Blog.

Staff SEO Expert

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This