---
title: "How do I vertically center text with CSS?"  
description: "How do I vertically center text with CSS?"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-25  
canonical: https://www.mindstick.com/forum/157993/how-do-i-vertically-center-text-with-css  
category: "css-css3"  
tags: ["html", "css", "css position"]  
reading_time: 1 minute  

---

# How do I vertically center text with CSS?

How do I [vertically center](https://www.mindstick.com/forum/158003/how-do-i-vertically-center-text) [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) with [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)?

## Replies

### Reply by Aryan Kumar

To vertically [center text](https://www.mindstick.com/forum/23237/how-do-i-center-text-horizontally-and-vertically-in-a-textview-in-android) with CSS, you can use several different methods, depending on your layout and requirements. Here are three common methods:\
**Using Flexbox:**

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

## Using CSS table properties:

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

## Using absolute positioning:

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


---

Original Source: https://www.mindstick.com/forum/157993/how-do-i-vertically-center-text-with-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.