<div class="wrapper">
  <div class="title-wrap pos-a">
    <div class="title-pos">
      <h1 class="title">Title</h1>
      <div class="subtitle">Subtitle</div>
    </div>
  </div>

  <div class="wheel pos-a"></div>
</div>
.pos-a {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wheel {
  border: 3px solid crimson;
}

.title-wrap {
  outline: 2px dashed rgba(20, 100, 0, 0.5);
}

.title {
  margin: 0;
}

.title-pos {
  outline: 2px dashed rgba(250, 20, 20, 0.2);
  transform: translateY(-100%);
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.