
For many years the bane of any web designer's existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.

## Using Flexbox

Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to `flex` and center the items horizontally (`justify-content: center`) and vertically (`align-items: center`).

``` css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
```

Now all items originate from the center of the container!

It is important to note that if you change to `flex-direction: column` the properties have the opposite effect: `justify-content` becomes the vertical axis and `align-items` becomes the horizontal. Think of it as rotating the container element's axes.

## Using CSS Grid

Meanwhile, CSS Grid makes it even easier by only needing `place-items: center` to center elements in the grid. Just set the display to `grid`, place the items, and you're off to the races.

``` css
.container {
    display: grid;
    place-items: center;
}
```

If you want to control the individual axes you can use the same properties as we did with Flexbox instead, `justify-content` for the horizontal axis and `align-items` for the vertical.

``` css
.container {
    display: grid;
    justify-content: center;
    align-items: center;
}
```

Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.

## Credit

_Today’s Tuesday Tips was adapted from [a series of posts on Daily Dev Tips](https://daily-dev-tips.com/posts/css-grid-most-easy-center-vertical-and-horizontal/)._


<p>For many years the bane of any web designer&#39;s existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.</p>

<h2>Using Flexbox</h2>

<p>Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to <code>flex</code> and center the items horizontally (<code>justify-content: center</code>) and vertically (<code>align-items: center</code>).</p>

<p><code> css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
</code></p>

<p>Now all items originate from the center of the container!</p>

<p>It is important to note that if you change to <code>flex-direction: column</code> the properties have the opposite effect: <code>justify-content</code> becomes the vertical axis and <code>align-items</code> becomes the horizontal. Think of it as rotating the container element&#39;s axes.</p>

<h2>Using CSS Grid</h2>

<p>Meanwhile, CSS Grid makes it even easier by only needing <code>place-items: center</code> to center elements in the grid. Just set the display to <code>grid</code>, place the items, and you&#39;re off to the races.</p>

<p><code> css
.container {
    display: grid;
    place-items: center;
}
</code></p>

<p>If you want to control the individual axes you can use the same properties as we did with Flexbox instead, <code>justify-content</code> for the horizontal axis and <code>align-items</code> for the vertical.</p>

<p><code> css
.container {
    display: grid;
    justify-content: center;
    align-items: center;
}
</code></p>

<p>Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.</p>

<h2>Credit</h2>

<p><em>Today’s Tuesday Tips was adapted from <a href="https://daily-dev-tips.com/posts/css-grid-most-easy-center-vertical-and-horizontal/">a series of posts on Daily Dev Tips</a>.</em></p>

Assets

Square

The Modern Way to Center Content in CSS

View post on our website

Tall

The Modern Way to Center Content in CSS

View post on our website

Wide

The Modern Way to Center Content in CSS

View post on our website

Other

The Modern Way to Center Content in CSS