Fluidly position Content with an offset

Question

I have the effect I am looking for: Content is "centered" in a container with an offset and will gracefully center itself as the window/container shrinks. In my case my yellow content is 25% of the way in from the left in the main container and will become centered when the screen shrinks.

Is there a better or more efficient way of accomplishing this? I have tried the css functions min and clamp but I couldn't achieve what I was looking for.

.container {
  background: red;
  padding: 2rem;
}

.squish {
  margin: 0 auto;
    max-width: max-content;
}

.width50 {
  min-width: 50vw;
}

.content {
  width: 10em;
  
  background: yellow;
  padding: 1rem;
}

<div class="container">
<div class="squish">
<div class="width50">
<div class="content">
Sequi distinctio veniam corrupti nihil non. Ea sunt dolorum pariatur accusamus. Eveniet non atque rerum et sed soluta. Magnam quia adipisci iste consectetur velit et perspiciatis
</div>
</div>
</div>
</div>

Answer 1

Have you tried flexbox for this issue? You can center the element by adding display: flex; to the parent and also justify-content: center; Checkout my snippet below :)

Also checkout flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
display: flex;
justify-content: center;
padding: 5rem 0;
background-color: blue;
}

.content {
  padding: 1rem;
  background: white;
}

<div class="parent">
  <div class="content">
    <p>Text Goes here</p>
  </div>
</div>