JSFiddle - React, Tailwind, and code Playground

by jamesclebio

HTML

<table>
  <tr>
    <td>
      Eu tenho múltiplas linhas e estou centralizado verticalmente em uma célula de tabela.
    </td>
  </tr>
</table>

<div class="tabela-centralizada">
    <p>Eu tenho múltiplas linhas e estou centralizado verticalmente em um elemento que se comporta como uma célula de tabela (via CSS).</p>
</div>

CSS

body {
  background: #0C2939;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* O padrão é vertical-align: middle; */
}

.tabela-centralizada {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.tabela-centralizada p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}