by Sai gowtham

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

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.

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

image-center-horizontally-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%);
}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course