Sep 9, 2023 Author - Sai gowtham

How to center an image (horizontally & vertically) in css

css1min read

In this tutorial, we will learn about centering an image horizontally and vertically in CSS.

Centering using flex-box

Example:

<div class="center-image">
     <img src="https://via.placeholder.com/150x150/"/>
</div>

.center-image{
   display:flex;
   justify-content:center; /* horizontally center */
   align-items:center;    /* vertically center */
   height:300px;
   width:300px;
   background:orange;
 }

.center-image img{
  max-width:100%;
  max-height:100%;
}

Here we used css flex-box to center an image both horizontally and vertically inside a div element.

justify-content:center centers the image horizontally
align-items:center centers the image vertically.

Centering using absolute position

<div class="center-image">
     <img src="https://via.placeholder.com/150x150/"/>
</div>

.center-image{
  height:300px;
  width:300px;
  background:orange;
  position:relative;
 }

.center-image img{
  max-width:100%;
  max-height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}