使用偏移量流畅地定位内容

Question

我有我想要的效果：内容是"居中的"；在具有偏移的容器中，并将随着窗口/容器的收缩而优雅地居中。在我的情况下，我的黄色内容是主容器中从左边进入的25%，当屏幕缩小时会变为居中。

有没有更好或更有效的方法来实现这一点？我尝试过css函数min和clamp，但无法实现我想要的。

.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

您尝试过flexbox解决此问题吗？可以通过添加display:flex使图元居中；向父母证明内容的合理性：中心；查看下面的代码片段：(

同时检查柔性盒：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>