CSS Vertical Align – How to Center Vertically and Horizontally in CSS

Sometimes you want a text or an image to be ideally in a center of a block. In this post I will show you 4 ways how to do that! Four ways for achieving CSS vertical align / CSS vertical and horizontal center will be presented.

Youtube Video – CSS Vertical and Horizontal Center

Demo and code (tl;dr)

See the Pen Untitled by Artur Karczmarczyk (@arturkarczmarczyk) on CodePen.

Approach 1: CSS Vertical Align Text

Let’s jump right into the code and start with our initial HTML:

<div class="examples">
    <div class="example-container">
        <div class="title">text-align</div>
        <div class="example-text-align">
            <img src="crosshair.svg" class="center-me">
        </div>
    </div>
    <div class="example-container">
        <div class="title">absolute</div>
        <div class="example-absolute">
            <img src="crosshair.svg" class="center-me">
        </div>
    </div>
    <div class="example-container">
        <div class="title">flex</div>
        <div class="example-flex">
            <img src="crosshair.svg" class="center-me">
        </div>
    </div>
    <div class="example-container">
        <div class="title">grid</div>
        <div class="example-grid">
            <img src="crosshair.svg" class="center-me">
        </div>
    </div>
</div>

The HTML here is really simple, all we have is a set of four containers, for four examples. We will start with the first one, where we want to align text using text-align: center and vertical-align: middle. Here is the CSS for that:

.example-text-align {
    width: 100%;
    height: 100%;
    text-align: center;
}
.example-text-align .center-me {
    vertical-align: middle;
}

And here is the result:

We have the item centered horizontally, but it fails to be centered vertically. What we can do to solve that is to set the line height for text in the example div to be full size of that div. Here, it is 300px:

.example-text-align {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
}
.example-text-align .center-me {
    vertical-align: middle;
}

And now the crosshair image is centered horizontally and vertically:

Approach 2: Position Absolute Center

In the second approach we will use the trick with position: absolute and centering the item by setting its left and right properties to 50%. Here is the CSS for that:

.example-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
}

And here is the result:

Unfortunately, the item is slightly off. When we set the left and top to 50%, we were setting the image top-left corner in the center of the div. We need to move the crosshair image a little bit to the left and top, in order to align image center and not the top-left corner. To do that we can use translate transform:

.example-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Now we image css position absolute center:

Approach 3: Flex Vertical Align, Flex Center

In this approach we will use flex for vertical align of image in a div. We will use flex align-content: center and justify-content: center for that. Here is the CSS code:

.example-flex {
    display: flex;
    align-content: center;
    height: 100%;
    justify-content: center;
}

And that’s it!

Just note that we needed to set the flex size to 100% of the container, otherwise the image would be centered horizontally but not vertically.

Approach 4: Grid Align Items Center – Place Items Center

In the final approach, we will use CSS grid to center image vertically and horizontally. The CSS for that is really simple!

.example-grid {
    display: grid;
    place-items: center;
    height: 100%;
}

And actually that’s it! In just three lines we centered the image in the container:

Inspecting the code in browser web tools will allow us to notice, that place-items: center is a shorthand for setting two more well-known CSS grid properties: align-items: center and justify-items: center:

Summary

In this web dev idea I showed you how to center image or text vertically and horizontally in CSS. For that we used four approaches – CSS vertical align text, position absolute center, flex vertical align center and grid align items center with place-items center. I encourage you to check out the Youtube video of How to Center Vertically and Horizontally in CSS | Center with Flex | Center with Grid. In the video I show you all the four approaches in more detail. Also, I encourage you to check out a post on a similar matter – making a div or image full-screen in CSS.

If you’d like to learn more on HTML, CSS and LESS in a structured, no-nonsense, hands-on manner, try my Udemy HTML & CSS 2022: Hands-on No-nonsense Guide!