<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.