使用偏移流畅地定位内容

Question

我得到了我正在寻找的效果：内容在具有偏移量的容器中“居中”，并且随着窗口/容器的缩小而优雅地居中。在我的例子中，我的黄色内容是主容器左侧的 25%，并且在屏幕缩小时会居中。

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

.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; 来使元素居中。给父母，还有 justify-content: center;在下面查看我的 sn-p :)

同时签出 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>