0

How can I center an image vertically an horizontally in my html page ? The image should kept in center irrespective of the size of the screen changes .I tried something like below ,but it is not centering the image vertically.

<body>
<img src="img/blogg.PNG" height="20%" width="20%"  style="display: flex;
     top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
   justify-content: center;
position: relative;
padding-top: 15%;
  margin: auto;
    
    align-items: center;
 " />
</body>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Devika
  • 135
  • 1
  • 11

2 Answers2

0

You can try to use this styling

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Oyinkansola Shoroye
  • 299
  • 2
  • 3
  • 11
-1

You can use the flex display properties with a few small rules, in this way you can avoid to set the absolute position which can cause the image to overlap with other elements if you don't check all the media queries well

 body{
     min-height: 100vh
 }
  .img-centered{
      height:100%;
      display: flex; 
      justify-content: center; 
      align-items:center;
  }
   <body>
    <div class="img-centered">
         <img src="https://picsum.photos/id/237/200/300" height="300" width="200" />
    </div>
</body>
Sim1-81
  • 618
  • 4
  • 14