Question

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

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

Answer 1

假设浮动且将居中的元素为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。

Answer 2

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

Answer 3

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

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

在CSS中，您可以使用它来设置样式：

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

其中表示您的上下边距为零像素，并且在左侧或右侧，自动计算出需要多少才能均匀。

只要它在那里并且不是100％，对于宽度放入什么并不重要。否则你不会在任何事情上设置中心。

但是如果你向左或向右浮动它，那么投注将被关闭，因为它会将其从页面上正常的元素流中拉出来，并且自动边距设置将不起作用。

Answer 4

您可以fit-content使用width值。

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

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

Answer 5

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

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

Proof that it is working!

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

Answer 6

当id = container（外部div）和id = contains（内部div）时，这种方法效果更好。强烈推荐的解决方案的问题在于，当浏览器尝试满足左侧：-50％属性时，它会导致某些情况进入水平滚动条。这个解决方案There is a good reference

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

Answer 7

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

Example

Answer 8

50％元素

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

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

8 个答案: