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

Others

Others

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