Ways to Center Elements with CSS
Tags: css, tutorial, webdev, writing
Published: 2022-07-27 13:01:00

Centering in CSS has traditionally been a cause for frustration. It’s an everyday task yet there are so many possible solutions! The approach you take will differ depending on whether you’re centering horizontally, vertically or both!

In this tutorial, we’ll look at which methods are best in each scenario.

## Horizontal Centering

### Inline Elements
Inline elements like text (and links) are super simple to center horizontally using the `text-align` property:
```css
p {
  text-align: center;
}
```
This works for inline, inline-block, inline-flex, inline-table, etc.

### Block Elements
A block-level element can be centered if both its `margin-left` and `margin-right` properties are set to `auto` (assuming the element has a `width`). It’s often done with the `margin` shorthand:
```css
.element {
  margin: 0 auto;
}
```
However, the modern way to center block level elements (anything that isn’t text) is to use [Flexbox](https://dev.to/rembertdesigns/the-css-flexbox-tutorial-216j)!

Let’s assume we have HTML like so:
```html
<div class="container">
  <div>.element</div>
</div>
```
Add the following CSS:
```css
.container {
  display: flex;
  justify-content: center;
}
```
This will horizontally center any element inside the `.container` element.

## Vertical Centering
Vertical centering has traditionally been quite tricky. And more often than not it’d be accomplished with code like so:
```css
.parent {   
  position: relative; 
} 
.child {   
  position: absolute;   
  top: 50%;   
  transform: translateY(-50%); 
}
```
This indeed works as it moves the child element back up half the distance of of its height. And it positions the middle of the child element at the middle of its parent.

However, we can do this much more simply with Flexbox:
```css
.container {
  display: flex;
  align-items: center;
}
```
This will vertically center any element inside the `.container` element.

## Centering both Vertically and Horizontally
To center both vertically and horizontally we simply combine these techniques!

To perfectly center an element, in the middle of its container:
```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
If using CSS Grid, we can also do this easily:
```css
.container {
  display: grid;
  place-items: center;
}
```
Anything can be centered in CSS!

Once you know the basics of [Flexbox](https://dev.to/rembertdesigns/the-css-flexbox-tutorial-216j) and [Grid](https://dev.to/rembertdesigns/the-css-grid-tutorial-458i), you’ll see just how simple it is!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)