如何将可变宽度的浮动元素水平居中？
编辑：我已经使用包含div 作为浮动元素并为容器指定width（然后使用margin: 0 auto; 作为容器）来进行此工作。我只是想知道它是否可以在不使用包含元素的情况下完成，或者至少不必为包含元素指定 width。
【问题讨论】：
标签： css css-float positioning centering variable-width
假设浮动并居中的元素是 div 和 id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
并应用以下 CSS：
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
这是一个很好的reference。
【讨论】：
margin-left 代替left 和position: relative。 Margin-left 在 -50% 元素上为我工作。
.center {
display: table;
margin: auto;
}
【讨论】：
您可以为width 使用fit-content 值。
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
注意：它只适用于最新的浏览器。
【讨论】：
当 id = 容器（即外部 div）和 id = 包含（即内部 div）时，这会更好。强烈推荐的解决方案的问题在于，在某些情况下，当浏览器试图迎合 left:-50% 属性时，它会导致水平滚动条。 There is a good reference 这个解决方案
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
【讨论】：
display: inline-block 和 text-align: center 的组合可以解决问题。
假设你有一个DIV 想要水平居中：
<div id="foo">Lorem ipsum</div>
在 CSS 中你可以这样设置样式：
#foo
{
margin:0 auto;
width:30%;
}
这表明您的顶部和底部边距为零像素，并且在左侧或右侧，自动计算出需要多少是均匀的。
你输入的宽度并不重要，只要它在那里并且不是 100%。否则你不会将中心设置在任何东西上。
但是，如果您将它向左或向右浮动，则赌注将被取消，因为这会将其从页面上的正常元素流中拉出来，并且自动边距设置将不起作用。
【讨论】：
width: auto; 不起作用（AFAIK）。
这里流行的答案有时确实有效，但有时它会创建难以处理的水平滚动条 - 尤其是在处理宽水平导航和大型下拉菜单时。这是一个更轻量级的版本，有助于避免这些边缘情况：
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
为了更具体地回答您的问题，可能无法不设置一些包含元素，但是很有可能不指定宽度值。希望这可以避免一些人头疼！
【讨论】：
你不能只使用display: inline block 和align 到center 吗？
【讨论】：
inline-block 很好的解决方案！至少你在 7 年后获得了 +1 ;)
对于 50% 的元素
width: 50%;
display: block;
float: right;
margin-right: 25%;
【讨论】：