DEV Community

loading...

How to center things with CSS

flaviocopes profile image flavio ⚡️🔥 Originally published at flaviocopes.com on ・2 min read

Centering things 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.

Center horizontally

Text

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

p {
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Blocks

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

#mysection {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

any element inside #mysection will be horizontally centered.

Center horizontally


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-left: 0 auto;
  width: 50%;
}
Enter fullscreen mode Exit fullscreen mode

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

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

any element inside #mysection will be vertically centered.

Center vertically

Center both vertically and horizontally

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;
}
Enter fullscreen mode Exit fullscreen mode

Center both vertically and horizontally

Discussion (0)

pic
Editor guide