如何水平居中可變寬度的浮動元素？

編輯：我已經有了這個工作，使用包含div的浮動元素和指定容器的width（然後使用容器的margin: 0 auto;）。我只是想知道是否可以在不使用包含元素的情況下完成，或者至少不必爲包含元素指定width。

如果您要將它居中，爲什麼它會浮動？ – You 2009-08-05 09:31:35

這是一個很長的故事，我爲其他原因浮動它 – 2009-08-05 09:44:59

可能重複[**如何居中浮動元素？**]（http://stackoverflow.com/questions/4767971/how-to-center-float -elements） – arnaud576875 2013-06-21 10:05:30

假設你有一個DIV你想水平居中：

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

在CSS你用這種風格是：

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

其中規定，你有一個頂部和底部邊緣零像素，並在左側或右側，自動計算需要多少才能達到均勻。

只要在那裏並且不是100％，放入寬度並不重要。否則，你不會設置任何東西的中心。

但是，如果您將它浮動，向左或向右，則投注將關閉，因爲這會將其從頁面上正常的元素流中拉出，並且自動邊距設置不起作用。

2009-08-05 09:31:43 random

這裏唯一的問題是你必須明確地設置寬度; `width：auto;`不起作用（AFAIK）。 – You 2009-08-05 09:37:44

正確，你必須設置一些東西作爲寬度。但問題是詢問可變寬度，希望這不是另一個字的汽車，而是一些波動的價值或相對金額，如時間或％ – random 2009-08-05 09:43:01

假設這是自由浮動，將中心的元素是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關於這一點。

2009-08-05 10:06:50 Leyu

難道你不能只使用display: inline block和align到center？

2011-05-07 19:46:44 Kai

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

2012-04-10 22:54:48

可以使用fit-content值width。

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

注意：它只適用於最新的瀏覽器。

2013-08-13 10:17:22

這裏流行的答案有時會起作用，但有時會產生水平滾動條，這些滾動條難以處理 - 特別是在處理寬水平導航和大型下拉菜單時。下面是一個更輕的重量的版本，有助於避免這些邊緣情況：

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

爲了更具體地回答你的問題，它可能是沒有可能建立一些含有元素的事，但它很有可能沒有指定寬度值。希望能夠讓一些人頭疼！

2014-04-15 21:49:20 fohryan

當id = container（這是外部div）和id = contained（這是內部div）時，這會更好。下面強烈推薦的解決方案的問題是，當瀏覽器嘗試迎合左側的-50％屬性時，會導致某些情況下會出現水平滾動條。 There is a good reference對於此解決方案

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

2014-11-24 11:47:08

回答