JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Centralizar na vertical com CSS</h1>

<section class="text">
  <p> Lorem Ipsum, giving information!</p>
</section>

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

<section class="div">
    <div class="content-div"></div>
</section>

CSS

h1 {
    text-align:center;
}
.text p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.image img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.div .content-div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.content-div{
    width: 50px;
    height: 50px;
    background:#f60;
}

section {
  display: block;
  max-width: 500px;
  background: #433669;
  margin: 0 auto 1em;
  height: 140px;
  border-radius: .5em;
  color: white;
  padding: 0 5px;
}