Html CSS：在限制最大宽度的同时使流体 div 居中（没有 px 宽度）的响应方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17550044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?
提问by emersonthis
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 autoor 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 %.
我已经看到一百万个关于如何将块元素居中的问题，似乎有几种流行的方法可以做到这一点，但它们都依赖于固定像素宽度。然后margin:0 auto或者使用绝对/相对定位left:50%; margin-left:[-1/2 width];等。我们都知道如果元素的宽度设置为 %，这将无法工作。
Is there really no way to do this in a way that is truly fluid? I'm talking about using %for width (notsetting 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'tanswer my question (because they use fixed widths anyway). Here's an example.
当心：有很多解决方案使用流行语“响应式”但不回答我的问题（因为他们无论如何都使用固定宽度）。这是一个例子。
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.
更新：我差点忘了：你如何处理限制居中元素的最大宽度并仍然保持在中心？在@smdrager 的回答下查看我的评论。现实生活中的例子。我希望包含一段文本的弹出消息或灯箱效果显示在窗口的中心，并且文本根据宽度流畅地换行。但是我不希望文本框在文本难以阅读的地方伸展得太远（想象一个 4 英尺的屏幕，三个段落延伸到一行文本上）。如果为大多数方法添加最大宽度，则在达到最大宽度时居中的框将停止居中。
回答by smdrager
Centering both horizontally and vertically
水平和垂直居中
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.
实际上，以百分比为单位的高度和宽度使得居中更加容易。您只需将左侧和顶部偏移未由 div 占据的区域的一半。
So if you height is 40%, 100% - 40% = 60%. So you want 30% above and below. Then top: 30% does the trick.
所以如果你的身高是 40%，那么 100% - 40% = 60%。所以你想要上下 30%。然后 top: 30% 就可以了。
See the example here: http://dabblet.com/gist/5957545
请参阅此处的示例：http: //dabblet.com/gist/5957545
Centering only horizontally
仅水平居中
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:
使用内联块。但是，此处的另一个答案不适用于 IE 8 及以下版本。您必须为此使用 CSS hack 或条件样式。这是黑客版本：
See the example here: http://dabblet.com/gist/5957591
请参阅此处的示例：http: //dabblet.com/gist/5957591
.inlineblock {
display: inline-block;
zoom: 1;
display*: inline; /* ie hack */
}
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
通过使用媒体查询，您可以结合两种技术来实现您想要的效果。唯一的问题是身高。您使用嵌套的 div 在 % width 和
http://dabblet.com/gist/5957676
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;}
}
回答by Brian Phillips
From Chris Coyier's article on centering percentage widthelements:
来自 Chris Coyier 关于居中百分比宽度元素的文章：
Instead of using negative margins, you use negative
translate()transforms.
您不使用负边距，而是使用负
translate()变换。
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
回答by Francesco Belladonna
I think you can use display: inline-blockon the element you want to center and set text-align: center;on its parent. This definitely center the div on all screen sizes.
我认为您可以display: inline-block在要居中的元素上使用并设置text-align: center;在其父元素上。这绝对使所有屏幕尺寸的 div 居中。
Here you can see a fiddle: http://jsfiddle.net/PwC4T/2/I add the code here for completeness.
在这里你可以看到一个小提琴：http: //jsfiddle.net/PwC4T/2/为了完整起见，我在这里添加了代码。
HTML
HTML
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
CSS
CSS
#container
{
text-align: center;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
For vertical centering, I "dropped" support for some older browsers in favour of display: table;, which absolutely reduce code, see this fiddle: http://jsfiddle.net/jFAjY/1/
对于垂直居中，我“放弃”了对某些旧浏览器的支持display: table;，转而支持，这绝对减少了代码，请参阅此小提琴：http: //jsfiddle.net/jFAjY/1/
Here is the code (again) for completeness:
为了完整性，这里是代码（再次）：
HTML
HTML
<body>
<div id="table-container">
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
</div>
</body>
CSS
CSS
body, html
{
height: 100%;
}
#table-container
{
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
The advantage of this approach? You don't have to deal with any percantage, it also handles correctly the <video>tag (html5), which has two different sizes (one during load, one after load, you can't fetch the tag size 'till video is loaded).
这种方法的优点是什么？您不必处理任何 percantage，它还可以正确处理<video>标签 (html5)，它有两种不同的尺寸（一种是在加载期间，一种是在加载后，您无法获取标签尺寸，直到加载视频）。
The downside is that it drops support for some older browser (I think IE8 won't handle this correctly)
缺点是它放弃了对某些旧浏览器的支持（我认为 IE8 无法正确处理）
回答by G-Cyrillus
EDIT :
http://codepen.io/gcyrillus/pen/daCyuSo for a popup, you have to use position:fixed , display:table property and max-width with em or rem values :)with this CSS basis :
编辑：
http: //codepen.io/gcyrillus/pen/daCyu因此，对于弹出窗口，您必须使用 position:fixed 、 display:table 属性和 max-width 与 em 或 rem 值:)与此 CSS 基础：
#popup {
position:fixed;
width:100%;
height:100%;
display:table;
pointer-events:none;
}
#popup > div {
display:table-cell;
vertical-align:middle;
}
#popup p {
width:80%;
max-width:20em;
margin:auto;
pointer-events:auto;
}
回答by Bruno Vincent
This might sound really simplistic...
这听起来可能很简单......
But this will center the div inside the div, exactly in the center in relation to left and right margin or parent container, but you can adjust percentage symmetrically on left and right.
但这将使 div 在 div 内居中，正好在与左右边距或父容器相关的中心，但您可以在左右对称调整百分比。
margin-right: 10%;
margin-left: 10%;
Then you can adjust % to make it as wide as you want it.
然后您可以调整 % 以使其尽可能宽。
回答by Ms. Nobody
Something like this could be it?
可能是这样的吗？
HTML
HTML
<div class="random">
SOMETHING
</div>
CSS
CSS
body{
text-align: center;
}
.random{
width: 60%;
margin: auto;
background-color: yellow;
display:block;
}
DEMO: http://jsfiddle.net/t5Pp2/2/
演示：http: //jsfiddle.net/t5Pp2/2/
Edit: adding display:blockdoesn't ruin the thing, so...
编辑：添加display:block不会破坏事情，所以......
You can also set the margin to: margin: 0 auto 0 auto;just to be sure it centers only this way not from the top too.
您还可以将边距设置为：margin: 0 auto 0 auto;只是为了确保它仅以这种方式居中而不是从顶部居中。
