Say bye-bye to the problem of centering vertically on the web

For something theoretically so simple, vertical centering elements in CSS is not the easiest task to accomplish. This statement was especially true before browsers started supporting modern additions to CSS like flex and grid.

In this post, we are going to discuss some older tricks and more modern methods developers use to vertically center content in CSS. Since there is no one-size-fits-all solution to this problem, as each one has its own limitations, it doesn’t hurt to know every one of these methods to find the right solution in different scenarios.

Let’s get started!

---

If You Know the Height…

One of the older tricks of CSS is centering an element vertically with the help of position property. Here, we give the element an absolute position and set the margins in a way that pushes the element to the center.

With Margin Auto

We can provide equal values to the top and bottom positions of the element and set the margin to auto. This automatically centers the element with appropriate margins along the y-axis. In this example, we have set the top and bottom positions to zero. However, we have to specifically set the height of the element to prevent it from spanning the entire height.

.item {
    position: absolute;
    top: 0; bottom: 0;
    margin: auto;
    height: 50vh;
}

With Negative Margins

In this method, we place the top at the mid-point (at 50%) in the vertical direction. Then use a negative margin to move the top half of the element above the mid-point.

.item {
    position: absolute;
    top: 50%;
    left: 10vw; right: 10vw;
    height: 50vh;
    margin-top: -25vh; /*also consider padding and border sizes, if any, when calculating the margin*/
}

Here, too, we have to explicitly set the element height to get the right value for margin-top. But in most cases, we don’t want to set an explicit height for elements considering the height should account for width changes, text adjustments, etc. Therefore, these two methods are not ideal for vertical centering in most cases.

---

No Need for Height with Translate

We can adjust the last centering method to come up with a solution that escapes the problem with explicit heights. Here, after positioning the top of the element at the center, we use translateY to move it up 50% along the y-axis.

.item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

---

Tables and Vertical Align

CSS supports the vertical-align property for content placed inside table cells. We can take advantage of this and declare the element a table cell (and its parent as a table) to center its content. If you are using a div, set its display to table-cell. Or you can use actual table elements, but this solution is not semantically correct.

.container {
    display: table;
}

.item {
    display: table-cell;
    vertical-align: middle;
}

Similar to the last centering method, you don’t have to set an explicit height for an element when using tables. But if you want to place a non-centered element inside the cell, this method isn’t ideal.

---

Vertical Centering Using Flex

It’s not wrong to say that introduction of flex solved a lot of designing headaches web developers faced, including vertical centering. With this modern addition to CSS, we can easily produce simple, responsive, and straightforward vertical centering solutions.

The only drawback of these flex-based solutions is that they are not supported by earlier versions of Internet Explorer (below IE9). And you have to use webkit, moz, or ms prefix to support some other older browser versions.

Even then, though, flex adds incredible flexibility to managing page layouts and element positioning. Here we’ll explore a few ways to center content with flex.

With Flex Containers and Align Items

We can specify the alignment of items inside the parent flexbox using align-items and justify-content properties. When we set align-items to center, it vertically centers all items inside the flexbox if the flex-direction equals row (the default).

.container {
    display: flex;
    align-items: center;
}

If you are looking for a solution to vertically center a single element, the next method would be a better fit for you.

With Flex Items and Align Self

This solution gives you the freedom to vertically center only one element inside a flexbox. It makes use of the flex property, align-self, to place the element at the center.

.container {
    display: flex;
}

.center {
    align-self: center;
}

With Flex Container and Margin Auto

Another method to center a single element in a flex container is setting its margin to auto. Then, the browser automatically calculates appropriate margins to center it in both directions.

.container {
    display: flex;
}

.item {
    margin: auto;
}

With Ghost Items inside a Flex Container

Using ghost elements is not the prettiest way to center content. But it gets the job done. And in return gives you flexible spacing in the vertical direction. You can stack multiple items inside the flexbox and use ghost elements to push them to the center.

.container {
    display: flex;
    flex-direction: column;
}

.container::before, .container::after {
    content: "";
    flex: 1;
}

---

Vertical Centering Using CSS Grid

Grid is one of the most powerful additions to CSS in recent years. Since it allows us to control the layout along both the x and y axis, vertically centering with CSS grid is quite simple. And it provides us a number of ways to achieve this task.

Similar to flexbox, grid is not fully supported by older versions of modern browsers, including Internet Explorer, Chrome, and Firefox. Some older versions provide the option to enable support for grid even though it’s not available by default.

The first few ways of vertical centering with grid follow a similar pattern to what we did with flexbox. Let’s see examples of how they work.

With Grid Container and Align Items

We can vertically center all items inside a grid by setting align-items property to center.

.container {
    display: grid;
    align-items:center;
}

If you want to vertically center multiple items inside the parent element, make sure to separate the grid into columns to place them in the same row.

With Grid Item and Align Self

If you want to center only one item inside the grid, use align-self: center to style that particular item.

.container {
    display: grid;
}

.center {
    align-self: center;
}

With Grid Container and Margin Auto

Similar to what we did with flexbox, we can vertically center a single item inside a grid by setting its margin to auto.

.container {
    display: grid;
}

.center {
    margin: auto;
}

With Ghost Elements on the Grid

We can adjust the ghost element trick we did with flexbox to CSS grid. To achieve this, first, we need to create a grid with three rows. Then, the ghost elements we add take up the space of the first and last rows to push our element to the middle row.

.container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.container::before, .container::after {
    content: "";
}

With Exact Element Placement

Grid allows us to declare the exact place an element should be placed on with the help of several item properties. We can use this feature to place the element exactly at the center of a three-row grid and make our lives easier.

.container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

.item {
    grid-row:2;
}

---

Wrapping Up

Today, we discussed how to solve one of the recurring headaches in a web developer’s life, vertical centering content. We talked about nearly 13 different methods to achieve this task. I hope that covers it all. If you have any more tricks and tips on vertically centering content, don’t forget to share them with us in the comments.

If you want to learn how to easily identify layout issues, check out this guide to enable a simple CSS trick to highlight layouts on your site .

Source: livecodestream