如何水平居中可变宽度的浮动元素？

编辑：我已经有这个工作使用包含div的浮动元素和指定容器的width （然后使用margin: 0 auto;容器）。我只想知道是否可以在不使用包含元素的情况下完成，或者至less不必为包含元素指定width 。

假设被浮动的元素将被置于一个id="content"的div 。

 <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%; }

这是一个很好的参考。

 .center { display: table; margin: auto; }

您可以使用fit-content值的width 。

 #wrap { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; }

注意：它只适用于最新的浏览器。

这里stream行的答案有时会起作用，但有时会创build水平滚动条，这些滚动条很难处理，特别是在处理宽水平导航和大型下拉菜单时。这是一个更轻的版本，可以帮助避免这些边缘情况：

 #wrap { float: right; position: relative; left: -50%; } #content { left: 50%; position: relative; }

certificate它正在工作！

为了更具体地回答你的问题，可能不能设置一些包含元素，但是很可能没有指定宽度值。希望能够拯救出一些令人头疼的人！

假设你有一个你想要水平居中的DIV ：

  <div id="foo">Lorem ipsum</div>

在CSS中，你可以用下面的样式来设置它：

 #foo { margin:0 auto; width:30%; }

其中指出，您有一个零像素的顶部和底部边缘，并在左侧或右侧，自动计算需要多less是平衡的。

只要它在那里，并不是100％，那么宽度是什么都没有关系。否则，你不会设置任何东西的中心。

但是，如果您向左或向右浮动，则投注将被closures，因为这会将其从页面上正常的元素stream中拉出，而自动边距设置将不起作用。

你不能只使用display: inline block和center ？

例子。

当id = container（这是外部div）和id = contained（这是内部div）时，这会更好。下面强烈推荐的解决scheme的问题是，当浏览器尝试迎合左侧的-50％属性时，会导致某些情况下会出现水平滚动条。这个解决scheme有一个很好的参考

  #container { text-align: center; } #contained { text-align: left; display: inline-block; }