How do I vertically center text with CSS?

Question

Aryan Kumar · Answer

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%);
}

forum

How do I vertically center text with CSS?

Revati S Misra

Can you answer this question?

1 Answers

Liked By