Centering anything vertically with CSS

Centering anything horizontally is easy but centering vertically is a little bit trickier. The display: block; margin: 0 auto; will center an HTML element horizontally.

On the other hand, you can center anything vertically in a few different ways. In this post, I will show you two different ways to vertically center anything.

And you can think of these two methods as the blueprints of centering elements.

Centering vertically with Flexbox

The HTML markup matters while centering with Flexbox. That means you have to organize or wrap your HTML elements in a specific way before you write the CSS. See the markup or structure below:

HTML MARKUP

You have to wrap the element within a containing <div>/<section>. In this example, I have a <div> that has a class .container. And this container <div> contains another <div> (inside of it) that has a class .vertically-centered.

<div class="container">
	<div class="vertically-centered">
		<p>It could be a heading, image, paragraph, or multiple items.</p>
	</div>
</div>

CSS

.container {
	display: flex;
	align-items: center;
	/*justify-content: center;*/
	/*use above property if you also 
	want to make it horizontally centered.*/
}

And you don’t need to write any CSS for the .vertically-centered class or <div> to make it vertically centered. Because the CSS you wrote for the container <div>, it will reflect to its child element(s).

OUTPUT

Learn more about centering a <div> »

Centering vertically with CSS position & transform properties

Like the first example (flexbox), this method also needs a specific and similar HTML structure before you write the actual CSS.

In this second method, I will show you how to center an element vertically using CSS positioning and transform.

And in the example below, I have the same HTML markup:

<div class="container">
	<div class="vertically-centered">
		<img src="bulb-small.png" alt="bulb" class="nolazy">
	</div>
</div>

CSS

.container {
	position: relative;
}
.vertically-centered {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

OUTPUT

In this example, I made position: absolute; to the .vertically-centered <div> (child) related to the .container (parent) <div>.

Next, I am pushing the child <div> by 50% from the top (top: 50%;). And then pushing it back by 50% of its own height (transform: translateY(-50%);).

By doing this, the child <div> or the content or the image will be perfectly centered vertically. As you see in the above example, the content (image) is perfectly centered in the red-yellowish container.

Learn more about centering HTML elements

• Center a table
• Center a video
• Center text (vertically)
• Center an image
• Center alignment using absolute position
• Center alignment using Flexbox

Conclusion

Now you know how to center anything vertically. You can use any one of the two methods that you like. I don’t know about you but I like the first method (flexbox) to center anything because of its simplicity.

No matter, if it’s a text, image, or many items within a <div>, any of the methods will work just fine to center aligning vertically.

Every developer has their own & preferred way of centering elements vertically. And I hope, you’ll find your preferred method between these two.