JSFiddle - React, Tailwind, and code Playground

by villard

HTML

<div class="table">
    <div class="cell">
      <span class="content">Я по центру</span>
    </div>
    <div class="cell">
      <span class="content">Я тоже</span>
    </div>
  </div>

CSS

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .table {
      display: table;
      height: 100%;
      width: 100%;
    }

    .cell {
      background: pink;
      display: table-cell;
      width: 50%;
      text-align: center;
      vertical-align: middle;
    }

    .cell + .cell {
      background: lightblue;
    }

/* ***
<!--[if lte IE 7]>
.cell {
        float: left;
        clear: right;
        writing-mode: tb-rl;
        text-align: center;
        height: 100%;
        width: 49.99%;
      }

      .content {
        display: inline-block;
        width: 100%;
        writing-mode: lr-tb;
      }
    </style>
  <![endif]-->