<div class="container">
  <div class="circle">
    <p class="circle-content">
      Probably the best we can do for now!
    </p>
  </div>
</div>
.circle {
  background: #456BD9;
  border-radius: 50%;
  color: #fff;
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  position: relative;
  width: 100%;
}

.circle-content {
  align-items: center;
  display: flex;
  height: 100%;
  hyphens: auto;
  justify-content: center;
  left: 50%;
  padding: 0.75em;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 100%;
}

.container {
  max-width: 66vmin;
  width: 66%;
}

External CSS

  1. https://codepen.io/tylersticka/pen/84283323f542da5a9690fa4581c876ec

External JavaScript

This Pen doesn't use any external JavaScript resources.