CSS 如何水平居中可变宽度的浮动元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1232096/
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
How to horizontally center a floating element of a variable width?
提问by Waleed Eissa
How to horizontally center a floating element of a variable width?
如何水平居中可变宽度的浮动元素？
Edit: I already have this working using a containing divfor the floating element and specifying a widthfor the container (then use margin: 0 auto;for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a widthfor the containing element.
编辑：我已经使用了div浮动元素width的包含并为容器指定了一个（然后margin: 0 auto;用于容器）。我只是想知道它是否可以在不使用包含元素的情况下完成，或者至少不必width为包含元素指定 a 。
回答by Leyu
Assuming the element which is floated and will be centered is a divwith an id="content"...
假设浮动并居中的元素是div带有id="content"...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
并应用以下CSS：
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good referenceregarding that.
这是一个很好的参考。
回答by Leyu
.center {
display: table;
margin: auto;
}
回答by Fizer Khan
You can use fit-contentvalue for width.
您可以将fit-contentvalue 用于width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
注意：它仅适用于最新的浏览器。
回答by Vianney Sserwanga
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good referencefor this solution
当 id = 容器（它是外部 div）和 id = 包含（它是内部 div）时，这效果更好。强烈推荐的解决方案的问题在于，当浏览器试图满足 left: -50% 属性时，它会在某些情况下导致水平滚动条。这个解决方案 有一个很好的参考
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
回答by fohryan
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
这里流行的答案有时确实有效，但有时它会创建难以处理的水平滚动条 - 特别是在处理宽水平导航和大型下拉菜单时。这是一个更轻量级的版本，有助于避免这些边缘情况：
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
要更具体地回答您的问题，可能无法不设置一些包含元素，但是很可能不指定宽度值。希望能帮到外面的人一些头痛！
回答by random
Say you have a DIVyou want centred horizontally:
假设你有一个DIV你想要水平居中的：
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
在 CSS 中，您可以使用以下样式对其进行样式设置：
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
这表明您的顶部和底部边距为零像素，无论是左侧还是右侧，都会自动计算出需要多少才能保持均匀。
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
只要它在那里并且不是100％，你为宽度放入什么并不重要。否则你就不会以任何事情为中心。
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
但是，如果您将它向左或向右浮动，那么赌注就会关闭，因为这会将其从页面上的正常元素流中拉出来，并且自动边距设置将不起作用。
