how to center images vertically and horizontally in html and css

Aligning elements in a webpage is probably one of the most challenging things for a beginner. You know all the HTML tags and your code is correct but somehow things just don’t align how you want it to be. One of the important concepts to understand is the type of elements: block elements and inline elements. Inline elements will go with the flow of the page while block elements can break the flow and start on a new line.

The image (img tag) is an inline element, at least by default. This limits how it is rendered on the page. However, you can change the element type using the CSS.

There are some HTML meta tags that could be used such the center tag. However, such tags are frowned upon and is outdated having been deprecated since HTML4. We will look at only how the CSS can be used for vertical and horizontal positioning in this post.

horizontal centering

using the text-align property

The text-align property works only with the block level elements. This is probably one of the simplest of the methods but do come with its own shortcomings. It works best when the image size is smaller than the viewport or the width of the screen.

As the img tag is an inline element and text-align property works with block elements, means you will need to wrap the img tag with a block element. The div element is a block element which we will use to wrap the img tag.

<div style="text-align: center;"><img src="my-image.jpg"></div>

using the margin property

I believe that using the margin property is a better option than the text-align property to center images. This works for bigger image sizes and you do not necessarily have to wrap it with-in another element.

<img src="my-image.jpg" class="center-image"/>
.center-image {
          display: block;
          width: 75%;
          margin-left: auto;
          margin-right: auto;
}

vertical centering

Having to center the image horizontally is often the more common requirement. But occasionally you will need to center the image vertically as well. This is harder to accomplish than the horizontal centering, but still possible.

I am not a big fan of this method. You are probably much better off aligning the outer container vertically rather than the image itself. But sometimes you just have to do it because of other limitations, such as not having the ability to change the html code, but can modify the CSS (or something like that).

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

The above style code sets the position of the image as absolute. Then it sets the image to position of the image half way (50%) vertically from the top. This is still not the center, as the top of the image is along the center and not the center of the image. In order to move the image up, we use the transform property and move the image up half way (50%).

horizontal and vertical centering

One of the downside of using the vertical centering in the above fashion is that it will override some of the image (img tag) properties. This will cause the horizontal centering to not work correctly as per the example provided above. However we can use same technique that we used for vertical centering to do horizontal as well.

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

In addition to the top property, we are going to set the left property as well to 50%. This will move the left top corner of the image to the exact (absolute) center of the outer container. Now, we use the transform property to move the image half-way up and left.

The reason this approach works is because the top and left properties uses the height and width respectively of the container to calculate the 50%. The transform of uses the height and width of the image itself to calculate the 50%.