Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How do I vertically center text with CSS?

Revati S Misra 396 24 Apr 2023

How do I vertically center text with CSS?

Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

1 Answers

Aryan Kumar 25 Apr 2023

To vertically center text with CSS, you can use several different methods, depending on your layout and requirements. Here are three common methods:
Using Flexbox:

.container {
 display: flex;
 justify-content: center; /* horizontally center the child elements */
 align-items: center; /* vertically center the child elements */
}

Using CSS table properties:

.container {
 display: table;
 height: 100%;
 width: 100%;
}
.text {
 display: table-cell;
 vertical-align: middle;
}

Using absolute positioning:

.container {
 position: relative;
 height: 200px; /* or set a fixed height */
}
.text {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

MindStick Training