使用最大宽度和绝对定位将流体 DIV 居中

Posted 2023-03-05

【中文标题】使用最大宽度和绝对定位将流体 DIV 居中

【英文标题】：Centering a fluid DIV with max-width and absolute positioning

【发布时间】：2012-09-05 10:07:33

【问题描述】：

在有人投票反对我提出另一个居中问题之前。请在判断之前阅读我的情况！

我熟悉最常见的居中技术，但这是我的情况。我有一个 DIV，它必须在其父级中垂直和水平居中，但它也必须是流动的并且不超过 890px 的宽度。

最大宽度实现了我想要的流畅度，但是因为绝对定位的元素需要宽度而不是最大宽度，所以我的垂直/水平居中会中断。目前我不得不牺牲流动性而不是居中（反之亦然），但我需要两者。

我想始终保持居中 DIV 中的内容可见，我当前的代码不这样做，它会在窗口变小时隐藏内容http://jsfiddle.net/cCQ2w/

谁能提出一个可能对我有用的解决方案？

【参考方案1】：

我已尝试解决您的问题。请参阅此页面：http://jsfiddle.net/PGce2/。所以它水平和垂直居中并且它是“流动的”并且不超过890px的宽度。

【讨论】：

感谢这种不同的方法，但它超过了 890 像素，请尝试添加更多段落文本并使浏览器窗口更大。还有其他想法吗？

@egr103，我只是忘了删除“width:100%;”从.break css。我在这里更正了：http://jsfiddle.net/afNyC/。我在 Firefox、Chrome 和 IE 9 中对其进行了测试

太棒了！谢谢！基本上，我的原始代码在内容的主要位后面有一个 100% 宽度的 div，因此 bg 图像可以填满浏览器窗口的整个宽度。您是否建议在 .break 周围添加另一个包装器来获得这种效果？

@egr103，你是这个意思吗？ http://jsfiddle.net/nSc9n/

我是认真的。感谢您的所有帮助:)

【参考方案2】：

您可以提供 100% 的宽度，最大宽度设置为 890 像素。

我在 [here][1] 展示了水平和垂直居中对齐的 div 示例。

[1]: http://jsfiddle.net/r2qL5sgj/1/

【讨论】：

使用 width:100% 与存储计算的宽度一起使用，然后将宽度设置为初始值以绕过流量计算。