Img centered with flex

Vertically and horizontally centered image example

by Bilal AFSAR

HTML

<div class="horizontal div1">
  <div class="verticall">
    <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm" />
  </div>
</div>

<div class="horizontal div2">
  <div class="vertical">
    <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm" />
  </div>
</div>

<div class="horizontal div3">
  <div class="vertical">
    <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm" />
  </div>
</div>

CSS

div.horizontal {
  display: flex;
  flex-direction:row-reverse;
  
}

div.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.div1 {
  background-color: red;
  width: 350px;
  height: 150px;
}

div.div2 {
  background-color: #fcf;
  width: 400px;
  height: 400px;
}

div.div3 {
  background-color: green;
  width: 300px;
  height: 500px;
}

img {
  width: 100px;
  height: 100px;
}