Edit in JSFiddle

<div class="outer-box">
<div class="inner-box">
<div class="square">
<div class="content">
Hello
</div>

</div>
</div>
</div>

.outer-box {
  background-color: green;
  padding: 20% 10%;
}

.inner-box {
  display: block;
  width: 50%;
}

.square {
  position: relative;
  background-color: yellow;
  text-align: center;
}

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

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}