center image in a div

Question

I\'m trying to center horizontally an image in a div, and i don\'t understand why it isn\'t working... I\'ve centered images so many times, and this time i just don\'t under

Answer 1

Check the below code, I hope it will helps you.

.wrap{
  position: relative;
  height: 100vh;
  width: 100vw;
}
.midImg{
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 150px;
  width: 150px;
}  

<div class="wrap">
  <img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" alt="av61" class="midImg" />
</div>

Answer 2

---

.image {
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;

}

.image:before {
  content: '\200B';
/*   content: '';
  margin-left: -0.25em; */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
   }

---

<div class="image" style="height: 600px;">
    <div class="centered">
        <img src="download.jpg"  alt="" />
    </div>
</div>

Answer 3

you can simply add this css to your image

img{
   margin-left: auto;
   margin-right: auto;
}