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).

注意：有很多解决方案使用buzz字词responsive，但不要回答我的问题（因为他们使用固定宽度）。以下是示例。

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.

Update：
我几乎忘记了：如何处理限制中心元素的最大宽度并仍然保持在中心？看到我的评论@ smdrager的答案。现实生活中的例子。我想要一个弹出消息或灯箱效果，包含一段文本显示在窗口中央，文本根据宽度流畅地包装。但我不想让文本框伸展太远，文本将难以阅读（想象一个4ft屏幕，三段延伸到一行文本）。如果在大多数方法中添加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.

推荐答案

水平和垂直居中

实际上，以高度和宽度在百分比中，可以更轻松地居中。

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％以上和以下。

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

只水平居中

使用inline-block。另一个答案在这里将不工作在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 */
}

EDIT

通过使用媒体查询，您可以组合两种技术来实现您想要的效果。唯一的复杂性是高度。您使用嵌套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屋！