Others




How to Center Align an Image(Element) Vertically and Horizontally inside a div


There are different ways to vertically and Horizontally align an image inside a div, which we learn about in this example.

To align the image in the centre on the Vertical and Horizontal axis, use

  • position:absolute;
  • top:50%;
  • left:50%;
  • translate(-50%,-50%);

To align the image in the centre on the Vertical and Horizontal axis, use

Example : index.html
<style>
  .container{
    position:relative;
    width:100%;
    height:100%;
  }
  .vh-center{    
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);    
    -webkit-transform:translate(-50%,-50%);    
    -ms-transform:translate(-50%,-50%);    
  }
</style>

<div class='container'>
  <img src='image.png' class='vh-center'>
</div>
Try it Yourself

Demo