JSFiddle - React, Tailwind, and code Playground

by carlosmaniero

HTML

<div class="square">
    <div class="block">
        
        <div class="centered">
            <h1>Box 1</h1>
            <p>Não importa quanto texto eu coloque aqui. Ele vai ficar centralizado</p>
        </div>
        
    </div>
</div>
<div class="square">
    <div class="block">
        
        <div class="centered">
            <h1>Só o título</h1>
        </div>
        
    </div>
</div>

CSS

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Gera um quadrado responsivo. */
.square{
    width: 48%;
    height: 0; /* A mágica está aqui */
    padding-bottom: 48%; /* ... e está aqui */
    margin: 1%;
    float: left;
    position: relative;
}

/*
    Veja mais sobre como centralizar o texto no box aqui:
    http://css-tricks.com/centering-in-the-unknown/
*/
.block{
  position: absolute;
  text-align: center;
  background: #1a1a1a;
  width: 100%;
  height: 100%;
}
 
.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
 }
 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  background: #222;
  color: #FFF;
 }