> For the complete documentation index, see [llms.txt](https://chnn-anne.gitbook.io/html-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chnn-anne.gitbook.io/html-css/miscellaneous-topics/centering-elements.md).

# Centering Elements

You often want to center items on the page as a whole, or within a container element.  There are two common techniques to achieve this goal.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2F-MfJnY4YST33IS0PkolJ%2F-MfJp2vDNHHNyjAn61Gf%2Fimage.png?alt=media\&token=a611413a-8a15-4e5e-bf2e-3cc36f929075)

### Specific width with auto left and right margins

This technique works well when you know the width of the content to be centered.

* set a width on the element
* set the margin-left and margin-right to auto

```css
  body {
    margin-left:auto;
    margin-right:auto;
    width:300px;
  }
```

### Using flex and center in both horizontal/vertical directions.

Set the value of the display property to be flex in the column direction, and then center the items in both the horizontal and vertical directions.

```css
body {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
```

###

### Resources

{% embed url="<https://css-tricks.com/centering-css-complete-guide/>" %}