Centering an element in CSS is a task that is very different if you need to center horizontally or vertically.

In this post I explain the most common scenarios and how to solve them. If a new solution is provided by Flexbox I ignore the old techniques because we need to move forward, and Flexbox is supported by browsers since years, IE10 included.

2024 update

Use align-content: center

Center horizontally

Text

Text is very simple to center horizontally using the text-align property set to center:

p {
  text-align: center;
}

Blocks

The modern way to center anything that is not text is to use Flexbox:

#mysection {
  display: flex;
  justify-content: center;
}

any element inside #mysection will be horizontally centered.

---

Here is the alternative approach if you don’t want to use Flexbox.

Anything that is not text can be centered by applying an automatic margin to left and right, and setting the width of the element:

section {
  margin: 0 auto;
  width: 50%;
}

the above margin: 0 auto; is a shorthand for:

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

Remember to set the item to display: block if it’s an inline element.

Center vertically

Traditionally this has always been a difficult task. Flexbox now provides us a great way to do this in the simplest possible way:

#mysection {
  display: flex;
  align-items: center;
}

any element inside #mysection will be vertically centered.

Center both vertically and horizontally

Flexbox techniques to center vertically and horizontally can be combined to completely center an element in the page.

#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}

The same can be done using CSS Grid:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

Lessons in this unit:

0:	Introduction
1:	▶︎ How to center an element with CSS
2:	CSS Border inside the element
3:	What are good CSS Breakpoint values for Responsive Design?
4:	How to debug CSS by bisecting
5:	How to disable text selection using CSS
6:	How to put an item at the bottom of its container using CSS
7:	CSS, how to select elements that do NOT have a class
8:	How to stick an element on the bottom of the page with flexbox
9:	How to apply padding to multiple lines in CSS
10:	Making a table responsive using CSS
11:	CSS url()
12:	How to make an element smaller or bigger with CSS
13:	Customizing visited links
14:	Fix extra space after inline element
15:	How to create a sidebar that’s sticky but also scrolls
16:	How to embed YouTube videos using the correct aspect ratio
17:	Responsive pre tags in CSS
18:	Responsive YouTube Video Embeds
19:	How to remove all CSS from a page at once
20:	How I added Dark Mode to my website
21:	How to add a simple dark mode