CSS:在限制最大宽度的同时使流体 div 居中(没有 px 宽度)的响应方式? [英] CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

问题描述

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

I've seen a million questions about how to center a block element and there seem to be a couple popular ways to do it, but they all rely on fixed pixels widths. Then either margin:0 auto or with absolute/relative positioning and left:50%; margin-left:[-1/2 width]; etc. We all know this can't work if the element has a width set in %.

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

Is there really no way to do this in a way that is truly fluid? I'm talking about using % for width (not setting a dozen media queries with increasingly small fixed widths).

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

Beware: there are tons of solutions out there which use the buzz word "responsive" but don't answer my question (because they use fixed widths anyway). Here's an example.

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

Update: I almost forgot: how do you handle limiting the max-width of the centered element and still keep it in the center? See my comment under @smdrager's answer. Real-life example. I want a pop-up message or a light box effect containing a paragraph of text to appear centered in the window and the text to wrap fluidly depending on the width. But I don't want the text box to stretch out toooo far where the text would get difficult to read (imagine a 4ft screen with three paragraphs stretched out onto a single line of text). If you add a max-width to most approaches, the centered box will stop centering when the max-width is reached.

推荐答案

水平和垂直居中

实际上，以百分比为单位的高度和宽度使居中变得更加容易.您只需将左侧和顶部偏移 div 未占用区域的一半.

Actually, having the height and width in percents makes centering it even easier. You just offset the left and top by half of the area not occupied by the div.

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

So if you height is 40%, 100% - 40% = 60%. So you want 30% above and below. Then top: 30% does the trick.

参见此处的示例:http://dabblet.com/gist/5957545

仅水平居中

使用内联块.但是，此处的另一个答案不适用于 IE 8 及以下版本.您必须为此使用 CSS hack 或条件样式.这是黑客版本:

Use inline-block. The other answer here will not work for IE 8 and below, however. You must use a CSS hack or conditional styles for that. Here is the hack version:

参见此处的示例:http://dabblet.com/gist/5957591

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

编辑

通过使用媒体查询，您可以结合两种技术来实现您想要的效果.唯一的复杂之处是高度.您使用嵌套的 div 在 % width 和

EDIT

By using media queries you can combine two techniques to achive the effect you want. The only complication is height. You use a nested div to switch between % width and

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;}
}

这篇关于CSS:在限制最大宽度的同时使流体 div 居中(没有 px 宽度)的响应方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！