在网页设计中，让一个不固定宽度的 `div` 居中显示是一个常见的需求，尤其是在响应式布局中。那么，该如何优雅地实现呢？🤔 其实方法非常简单！我们可以利用 CSS 的 `margin: auto` 和 `display: flex` 来搞定。

首先，确保你的 `div` 容器没有固定的宽度设置，让它能够自由伸缩。接着，在父容器上添加以下代码：

```css

.parent {

display: flex;

justify-content: center; / 水平居中 /

align-items: center; / 垂直居中（可选） /

}

```

这样，无论子元素的宽度如何变化，它都会乖乖地待在页面中央！🤩

这种方法不仅简洁高效，还非常适合现代浏览器。如果你正在开发一个响应式网站，不妨试试看吧！💪 🌟