JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="something-semantic">
  <div class="something-else-semantic">
    <div>
      <span class="text">Unknown stuff to be centered.</span>
      <a href="#">
        <img src="http://findicons.com/files/icons/819/social_me/64/facebook.png" alt="twitter">
      </a>
    </div>
  </div>
</div>

CSS

.something-semantic {
  display: table;
  width: 100%;
  background: #ccc;
  height: 500px;
}

.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

img {
    vertical-align: middle;
}