JSFiddle - React, Tailwind, and code Playground

by crysfel

HTML

<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>

<section class="image">
  <img src="http://placehold.it/70x70">
</section>

CSS

section{
    height:200px;
    border:1px solid #000;
    text-align:center;
}

.text p,
.image img{
  position: relative;
  top: 50%;
  
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}