Home » CSS » How To Center Image Vertically And Horizontally Using CSS

When I started web development, it was difficult to align the image exactly center of the div. At the time, text-align: center did work for me, but I wasn’t so happy.

Since Flexbox was introduced, it has taken almost all efforts away from old techniques. I’ll suggest using only one technique to solve this problem – Flexbox. Using flexbox, we can easily center images vertically and horizontally inside the parent div.

But there are many ways to do the same thing with CSS. I have shortlisted some of the most useful techniques in this article.

1. Flexbox

Using Flexbox properties, we can tell child elements to align themselves properly inside the parent div. This technique works perfectly for space distribution and alignment of children inside.

Nesting Flexbox elements with other elements allows developers to create a complex layout without worrying about its alignment with its siblings.

How Flexbox Centers The Image

Flexbox uses an algorithm that understands its surroundings. So we have to set flexbox to the parent and apply some properties to make it work.

• display: flex – Tells the browser to use one-dimensional layout control for the element.
• align-items: center – aligns all the child elements to the center of the element vertically. The default value is stretch, which will make the image width 100%.
• justify-content: center – When we have more than one element, justify will tell all elements to stay in the center horizontally.
• height: 100%: Sets parent height to 100% (this could be any height)

2. Display Table

One of the oldest and most compatible techniques is to use tables or display: table and display:table-cell method. Tables have supported vertical centering since the beginning. We can use the vertical-align property to display data in proper alignment. This technique is a hack and doesn’t support text and images being centered together.
By default, text centering is done at the baseline, which may look ugly sometimes.

How Table Centres The Image

Table hack used two divs to recreate the table and table cell markup. So in the parent div, we use the display table to turn on tabular mode.

• display: table – Sets div to use properties of the table. This behavior is mandatory in this technique.
• height: 100% – Sets the height of the table.
• width: 100% – By Default table uses auto width, so we need to make it full width to image a bit of room for alignment.

In the table, an additional div is used, which behaves like a table cell. This should be done because vertical alignment is done only on table-cell elements.

• display: table-cell – Enables Cell Mode
• text-align: center – Horizontal Centering for the Child Element
• vertical-align: middle – Vertical Centering for Child Element

The combination of text-align and vertical-align will make the image centered and aligned.

3. Position and Transform

This solution uses the modern CSS3 transform property to move an object around. So we can align the image to the center using any of the position properties and transform the image to half of the negative space of their widths and heights using transform. By doing this, we’ll have a perfectly aligned image with its center origin.

How Position And Transform Centres The Image

It’s no magic trick here. But it works great when used with position: relative; it works with position absolute, but it can run into an overflow problem if the image is larger than the parent.

• position: relative – This is required to move objects in DOM space using left, top, right, and bottom options. This option works with position absolute as well.
• left: 50% – Moves the Image to the center of the page horizontally. But the Image center is at its left-most point, not at the center.
• top: 50% – Moves the Image to the center of the page vertically. But the Image center is at the top at this point. It should be at half of the image width.
• transform: translate(-50%, -50%) – This moves the object from its original position to the negative half distance in both horizontal and vertical axes.

4. Position and Margin

The way to use a lazy version of the transform and position method is to replace the transform with obvious values of margins. This is not the most compatible version, but it works for a smaller part of the UI where image dimensions are fixed and we don’t have to worry about the aspect ratio changing often.

How Position and Margin Centres The Image

This technique is similar to using the transform property. This one just uses margins to make the center transition. You have to know the image width and height to make it work because margins and padding don’t behave like they should when used in percentages. Using padding or margin in percentages is the last thing you ever want to do for this task.

• position: relative – This is required to move objects in DOM space using left, top, right, and bottom options. This option works with position absolute as well.
• left: 50% – Moves the Image to the center of the page horizontally. But the Image center is at its left-most point, not at the center.
• top: 50% – Moves the Image to the center of the page vertically. But the Image center is at the top at this point. It should be at half of the image width.
• margin:-50px 0 0 -50px – This moves the object from its original position to the negative half distance in both horizontal and vertical axes.

5. Object-fit (Hack)

We can use the simple object property of an image to fake the center-aligned look of the image inside the div. This will be considered a hack because the image will take the entire area of the parent, so we can’t have a text element next to it.

How Object-fit and Object-position Centres The Image

What this trick does is stretch the image element to the size of its parent. This gives a stretched version of the image. The image is properly placed in the center using object properties.

• position: absolute – This enables the sizing and moving of an image in the parent div
• left: 0% – aligns left edge to left of parent
• top: 0% – aligns the top edge to the top of the parent
• width: 100% –  makes the width 100%
• height: 100% – makes height 100%
• object-fit: none – this will keep the original size of the image, the image’s width and height will be irrelevant when we use the object-fit property.
• object-position: center – This moves the image object to the center part of the image.

6. Background-image (Hack but Worth Mention)

It’s not an actual solution to the problem, but this method is highly used in industry because it’s nonblocking. An image is part of HTML and DOM, so when the page loads, it starts loading.

But if we use an image inside CSS, it makes a difference from a performance standpoint. There are Three Methods to add CSS to HTML. With simple CSS rules, we can make it appear in the center.

How Background-Position Centres The Image

We have to use CSS to load the image in the background, and we can align the background in the center using background properties.

• width: 100% – Stretches Element to 100% width of its related parent.
• height: 100%  – stretches element to 100% height of its related parent.
• background-repeat: no-repeat – Stops repeating pattern and gives a single object.
• background-position: center center – makes the background center
• background-size: 100px 100px – This can be the size of the image

Final Words

Though there are many solutions to the same problem, each solution will work in different types of situations, sizes, and possibilities.  But personally, I suggest using the Flexbox method. It’s just working awesome.