test.html

<html>
<head>
<style>
  .square { 
    border: 5px solid red;
    position: relative;
    text-align: center;
    width: 50%;
    display: flex-block;
  }

  .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    
    font-size: 2em;
    padding-top: 20%;
  }

  </style>
<body>
  <div class="square">
    <div class="content">
      Hello!
    </div>
  </div>
</body>
</html>