html - CSS:在限制最大宽度的同时使流体 div(没有 px 宽度)居中的响应方式？

Question

关于如何使 block 元素居中，我已经看到了一百万个问题，似乎有几种流行的方法可以做到这一点，但它们都依赖于固定的像素宽度。然后 margin:0 auto 或使用绝对/相对定位和 left:50%; margin-left:[-1/2 width]; 等。我们都知道，如果元素的宽度设置为 %，这将无法工作。

真的没有办法以真正流畅的方式做到这一点吗？我说的是使用 % 作为宽度(不是 设置十几个固定宽度越来越小的媒体查询)。

注意:有大量的解决方案使用流行词“响应式”但不要回答我的问题(因为它们无论如何都使用固定宽度)。这是 an example .

更新:我差点忘了:你如何处理限制居中元素的最大宽度并仍将其保持在中心？在@smdrager 的回答下查看我的评论。现实生活中的例子。我希望包含一段文本的弹出消息或灯箱效果显示在窗口的中央，并且文本根据宽度流畅地换行。但我不希望文本框延伸得太远以至于文本难以阅读(想象一个 4 英尺的屏幕，其中三个段落延伸到一行文本上)。如果您为大多数方法添加最大宽度，则当达到最大宽度时，居中框将停止居中。

Answer 1

水平和垂直居中

实际上，以百分比表示高度和宽度会使居中更加容易。您只需将 left 和 top 偏移 div 未占用区域的一半即可。

所以如果你的高度是 40%，100% - 40% = 60%。所以你想要上下 30%。然后顶部:30% 就可以了。

请参阅此处示例:http://dabblet.com/gist/5957545

仅水平居中

使用行内 block 。但是，此处的另一个答案不适用于 IE 8 及以下版本。您必须为此使用 CSS hack 或条件样式。这是破解版:

请参阅此处示例:http://dabblet.com/gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

编辑

通过使用媒体查询，您可以结合两种技术来实现您想要的效果。唯一的问题是高度。您使用嵌套的 div 在 % 宽度和

之间切换

http://dabblet.com/gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}