How to Center Text in CSS
Tags: webdev, css, frontend, juniordeveloper
Published: 2023-10-05 20:49:21

## How to center text in CSS
You can center text in CSS both horizontally and vertically using a few different methods including margins, padding, flexbox, line-height, and text-align. How you center your text will depend on how your webpage is styled and whether you want to center horizontally, vertically, or both. Below, we'll explore centering text vertically using these methods in detail.

---

## How to horizontally center text in CSS
Horizontally centering text in CSS can be achieved with the text-align and margin CSS properties. The text-align property will align the text itself, whereas the margin property will be used to center the container that the text resides in.

![An example of centering text with text-align and margin: auto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xaomf1jipif1fswi4vmo.png)

### Horizontal text alignment with the text-align CSS property
In your CSS, add text-align: center to a selector that contains the text you need to center.

#### HTML
```html
<div class="center-me">
  <h1>Center this title!</h1>
</div>
```

#### CSS
```css
.center-me {
  text-align: center;
}
```

#### Output
![Some centered text by using text-align: center in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl5ub140x4vpulbjvzv6.png)

If you want all your text centered across the entire page you can use the asterisk (*) or body selectors instead of a specific one (see CSS snippet below).

#### CSS
```css
/* Option 1 - Body Selector */
body {
  text-align: center;
}

/* Option 2 - Asterisk Selector */
* {
  text-align: center;
}
```

### Horizontal text alignment with the margin CSS property
When you're working with a block-level element, you can center it using _**margin: auto**_ in your CSS. This is a common practice when you want to center text that is contained inside a content box. The auto margin centers the containing box, but the text's alignment stays the same.

#### HTML
```html
<div class="text-container">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus urna et turpis tempus pulvinar. Vestibulum laoreet lectus eget egestas mattis. Donec et leo consectetur, elementum est ac, aliquet nisl. Nunc aliquet, est sollicitudin suscipit auctor, lacus erat mattis ex, id bibendum lorem neque vitae mauris. Ut et tellus lectus. Maecenas non enim eget ante semper accumsan in at mi. Nam iaculis nec ex sed sodales. Morbi id euismod sapien.</p>
</div>
```

#### CSS
```css
.text-container {
  margin: auto;
  width: 450px;
  background-color: green;
  padding: 30px;
}
```

#### Output
![Text left-aligned within a horizontally centered content box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlq2hrt756oufas6qymy.png)

This output shows us that the **_margin: auto_** centered the block-level content box (green), but did not change the alignment of the text itself (it is left as default, left-aligned in this case).

If we want to alter the alignment of the text inside the content box, we can use the _**text-align**_ property on it (see below).

#### CSS
```css
/* Note the addition of the text-align: center */
.text-container {
  margin: auto;
  width: 450px;
  background-color: green;
  padding: 30px;
  text-align: center;
}
```

#### Output
![Centered text inside a centered content box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y47o0giws0157v2lkftl.png)

---

## How to vertically center text in CSS
Vertically aligning text in CSS can be achieved with the line-height and padding CSS properties. Line-height adjusts the minimum height of each line that the text sits on - you can think of it as adjusting the space between the lines on a lined sheet of paper. Padding adds space between the edge of an element (border) and the elements it contains.

### Vertical text alignment with the line-height CSS property
The **_line-height_** CSS property is typically used to adjust the spacing between several lines of text (ie in the body of a blog post), but it can also be used to center text vertically if you know the height of the containing element.

Here's an example of some text inside a containing div, the div has the height and width explicitly set.

#### HTML
```html
<div class="text-container">
  <p>This is some text</p>
</div>
```

#### CSS
```css
p {
  font-size: 1.5rem;
}

.text-container {
  width: 450px;
  height: 200px;
  background-color: green;
}
```

#### Output
As you can see below, our text will go to the top-left corner by default.
![Text in the top left of a content box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h9mfmye67ylgrkvp1x6.png)



### CSS w/ line-height centering
Here we added the **_line-height_** property and set it to the height of the containing div.

#### CSS
```css
p {
  font-size: 1.5rem;
}

.text-container {
  font-weight: 700;
  width: 450px;
  height: 200px;
  background-color: green;
  line-height: 200px;
}
```

#### Output
The text is now vertically aligned within it's containing div. Please note that if you write too much text to the point of the text wrapping to the next line, the results may be undesirable.
![Vertically centered text within a content box using hte line-height property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ree4vjpbaw3n9e5rtdzl.png)



### Vertical alignment with the padding CSS property
The **_padding_** CSS property is typically used to add space between the edges (border) of an element and its contents. In some cases it can be used to center text vertically within an element.

#### HTML
```html
<div class="text-container">
	<p>This is some text</p>
</div>
```

#### CSS (long-form)
This long-form CSS uses both the **_padding-top_** and **_padding-bottom_** properties. You can condense these properties into a single line as shown in the "CSS Alternative (shorthand)" section below.
```css
.text-container {
  background-color: green;
  width: 450px;
  padding-top: 60px;
  padding-bottom: 60px;
}
```

#### CSS Alternative (shorthand)
Note the **_padding_** property pulls double duty, replacing **_padding-top_** and **_padding-bottom_** via the shorthand shown below. Both the long-form CSS above and the shorthand CSS shown here are valid.
```css
.text-container {
  background-color: green;
  width: 450px;
  padding: 60px 0;
}
```

#### Output
By setting the top and bottom padding to the same amount, our text containing div grows in height, pushing our text into the vertical center.
![Vertically centered text within a content box using padding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izmiajngiayp8kcjqsx7.png)

---

## How to horizontally and vertically center text in CSS
Sometimes you need to center text both horizontally and vertically. We can achieve this by using flexbox in our CSS, we'll explore this in detail below.

### How to use flexbox to horizontally and vertically center text
To horizontally and vertically center our text we can use **_display: flex_** alongside a couple other properties. In total we'll be setting the **_display_**, **_justify-content_**, and **_align-items_** properties.

#### HTML
We've put our text in a containing element (div).
```html
<div class="text-container">
	<p>This is some text</p>
</div>
```

#### CSS
We set the containing div to flexbox and then align the text. We use **_justify-content: center_** to center the text horizontally and **_align-items: center_** to center the text vertically.
```css
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  width: 450px;
  height: 300px;
}
```

#### Output
![Vertically and horizontally centered text within a content box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/517cdogpknuu7ox8g73q.png)



---

## Scrimba Discount
_If you use our link to purchase a plan, we will receive a monetary kickback_

- Learn to code using Scrimba with their interactive follow-along code editor
- Join their exclusive Discord communities and network to find your first job!
- Use this URL to get 10% off on all their paid plans: [https://tinyurl.com/ScrimbaHATT](https://tinyurl.com/ScrimbaHATT)

---

## Sources

- CSS Layout - Horizontal & Vertical Align (Source: [W3Schools](https://www.w3schools.com/css/css_align.asp))
- How to Center Text & Headers in CSS Using the Text-Align Property (Source: [HubSpot](https://blog.hubspot.com/website/center-text-in-css))