How to horizontally center a floating element of a variable width?
如何水平居中可变宽度的浮动元素？
Edit: I already have this working using a containing div for the floating element and specifying a width for 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 width for the containing element.
编辑：我已经使用包含div的浮动元素并指定容器的宽度（然后使用margin：0 auto;对于容器）。我只想知道是否可以在不使用包含元素的情况下完成，或者至少不必为包含元素指定宽度。
7 个解决方案
#1
88
Assuming the element which is floated and will be centered is a div with an id="content" ...
假设浮动且将居中的元素是具有id =“content”的div ...
<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 reference regarding that.
这是一个很好的参考。
#2
65
.center {
display: table;
margin: auto;
}
#3
4
Say you have a DIV you 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.
但是如果你向左或向右浮动它，那么赌注就会关闭，因为它会将它从页面上正常的元素流中拉出来，并且自动边距设置将不起作用。
#4
4
You can use fit-content value for width.
您可以使用fit-content值作为宽度。
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
注意：它仅适用于最新的浏览器。
#5
4
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!
为了更具体地回答您的问题，可能无法设置一些包含元素，但是如果不指定宽度值，则很可能不这样做。希望能帮助那些有些头痛的人！
#6
2
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 reference for this solution
当id = container（外部div）和id = contains（内部div）时，这种方法效果更好。强烈推荐的解决方案的问题是，当浏览器尝试满足左侧：-50％属性时，它会导致某些情况进入水平滚动条。这个解决方案有很好的参考
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
#7
0
Can't you just use display: inline block and align to center?
你不能只使用display：inline block并对齐到center？
例。
#1
88
Assuming the element which is floated and will be centered is a div with an id="content" ...
假设浮动且将居中的元素是具有id =“content”的div ...
<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 reference regarding that.
这是一个很好的参考。
#2
65
.center {
display: table;
margin: auto;
}
#3
4
Say you have a DIV you 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.
但是如果你向左或向右浮动它，那么赌注就会关闭，因为它会将它从页面上正常的元素流中拉出来，并且自动边距设置将不起作用。
#4
4
You can use fit-content value for width.
您可以使用fit-content值作为宽度。
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
注意：它仅适用于最新的浏览器。
#5
4
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!
为了更具体地回答您的问题，可能无法设置一些包含元素，但是如果不指定宽度值，则很可能不这样做。希望能帮助那些有些头痛的人！
#6
2
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 reference for this solution
当id = container（外部div）和id = contains（内部div）时，这种方法效果更好。强烈推荐的解决方案的问题是，当浏览器尝试满足左侧：-50％属性时，它会导致某些情况进入水平滚动条。这个解决方案有很好的参考
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
#7
0
Can't you just use display: inline block and align to center?
你不能只使用display：inline block并对齐到center？
例。