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

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

---

编辑：我已经为浮动元素使用了containing

div

，并为容器指定了

width

（然后为容器使用

margin:0 auto；

）。我只是想知道它是否可以在不使用包含元素的情况下完成，或者至少不必为包含元素指定

宽度。
假设您有一个
DIV
，您想要水平居中：

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

它表示上下边界为零像素，在左边或右边，自动计算出需要多少像素才能达到均匀

你在宽度上加什么并不重要，只要它在那里并且不是100%。否则你就不会在任何事情上设置中心

但是如果你向左或向右浮动它，那么赌注就被取消了，因为这会把它从页面上的正常元素流中拉出来，自动边距设置将不起作用
 假设浮动并将居中的元素是带有
id=“content”
...    

这是一个很好的例子。
你能不能只使用
显示：内联块
和
对齐
到
中心

.
您可以使用
fit content
值作为
宽度

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

注意：它只适用于最新的浏览器。
这里流行的答案有时确实有效，但有时它会创建难以处理的水平滚动条，特别是在处理宽水平导航和大下拉菜单时。这是一个更轻的版本，有助于避免这些边缘情况：

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


为了更具体地回答您的问题，可能不可能不设置一些包含元素，但是很可能不指定宽度值。希望这能帮别人省去一些麻烦
 当id=container（即外部div）和id=contained（即内部div）时，这种方法效果更好。强烈推荐的解决方案存在的问题是，在某些情况下，当浏览器试图满足左侧：-50%属性时，它会导致出现水平滚动条。对于此解决方案

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

对于50%元素

width: 50%;
display: block;
float: right;
margin-right: 25%;

如果你要将它居中，为什么它会浮动？说来话长，我浮动它是因为其他原因这里唯一的问题可能是你必须明确设置宽度<代码>宽度：自动不起作用（AFAIK）。正确，您必须设置宽度。但问题是关于可变宽度，希望这不是自动的另一个词，而是一些波动的值或相对量，比如em或%，谢谢你的回答，实际上我对居中元素没有问题，我想做的是居中一个“浮动元素”。我知道这在CSS中是不可能的，但我希望有人能有一个可以解决这个问题的黑客，我甚至尝试使用一个表，但这也不起作用。不幸的是，在我的场景中，没有办法使元素不浮动，我需要它是因为特定的原因。这个解决方案帮助我完成了一个项目。谢谢。您也可以尝试
左边距
而不是
左边距
和
位置：相对
。Margin left在-50%元素上对我有效。是的-但是@muhd的附加值是什么？@marcusklaas，附加值是它可能在发布的解决方案不起作用的情况下起作用，或者可能更容易实现。我不太记得了，因为这是一个月前的事了。我喜欢这个解决方案，但是你可能需要溢出-x:hidden来防止水平滚动条。这需要一点时间才能弄清楚。指向“参考”的链接似乎已失效。这对我来说比公认的答案要好得多，两个都试试吧！我也更喜欢这种方法，但它在IE8+上工作，所以如果你需要IE7，你应该使用公认的答案。谢谢-真的节省了我的时间！这确实很有效。
display:inline-block
和
text-align:center
的组合起到了作用。
inline-block
很好的解决方案！至少你在7年后得到+1；）
#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

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

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

width: 50%;
display: block;
float: right;
margin-right: 25%;