How to align center image in a div? Horizontal/Vertical/Both

38704 Feb 2022

raman gulati0 followers

How an image can be centered either vertically or horizontally or horizontally and vertically at same time.

Any easily understandable method will be appreciated.

Thanks for the answer in advance.

0 likes

04 Feb 2022

Aligning images on different axis is a difficult job to do. When you try to align it using CSS, either it has no effect or doesn"t give the desirable results. But using the method depicted below, you can align center all images either vertically or horizontally or on the both the axis.

For this tutorial we will use the following markup:-

<div>

<img src="something.jpg" />

</div>

In the above code, there will be an image placed at the left top corner inside the div.

To change it"s alignment on different axis we will divide all the process in 3 part/cases.

Case no I :- Align the image horizontally.

To align images horizontally, we will use these lines of CSS:

div{

display: flex;

justify-content: center;

}

In the above code we have not applied any css on img element. Applying display flex property on the container div, we have changed the display property from block to flex, so we are now able to use some another properties like justify-content on the div. Once we apply justify-content: center;, everything inside the div get centered Horizontally.

Case no II :- Align the image vertically.

Such kinds of cases comes in scenario when there is a container div with a fixed height. Assume we have a div with the height of 1000 px containing an image with the height of 600px. Here pushing the image to the center from top seems difficult, but can be done using following 2 lines of extra CSS:

div{

height: 1000px; //fixed height

display: flex;

align-items: center;

}

Case no III :- Align the image horizontally and vertically.

It"s very easy to align any images in center horizontally and vertically. You just need following 3 lines of CSS:

div{

display: flex;

align-items: center;

justify-content: center;

}