Css - vertical centering of an image inside a div

Question

here HTML:

<div class="user-image text-center">
  <img class="avatars" src="css/img/avatar_1.jpg" alt="">
</div>

here CSS:

.user-image {
  height: 10vh;
  width: 15%;
  float: left;
 }

I'm trying to centering vertically my image inside my DIV (it's a square) but I'm a beginner and can't find the correct way. I tried vertical-align: middle; and margin: auto; but nothing. Can you suggest me some methods for that?

Answer 1

Use flex styles.

.user-image {
   display: flex;
   justify-content: center;
   align-items: center;
}