<div class="outer">
<div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
</div>
</div>
.outer {
position:relative;
width: 50%;
border: 2px solid #cc3f85;
}
.inner {
position:absolute;
left:50%;
transform:translateX(-50%);
width: 50%;
border: 2px solid #66d9ef;
}
This Pen doesn't use any external JavaScript resources.