JSFiddle - React, Tailwind, and code Playground

by karmeljuk

HTML

<h1>Вертикальне центрування лише з трьома рядками коду</h1>

<section class="text">
  <p>Я вертикально відцентрований рядок</p>
</section>

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

<section class="block-of-text">
  <p>
      <b>Я блоковий текст.</b>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p>
</section>

SCSS

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

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

.block-of-text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}


/* ====================================
   Base styling, to make the demo more fancy
   ==================================== */


body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: #59488b;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  text-align: center;
  color: white;
  font-weight: 200;
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
}

h2 {
  margin-bottom: 1em;
}

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