css - 包裝定位問題

Question

我有一個包含幾個div的包裝。我想這個包裝水平居中，我希望這個包裝包裝它的所有內容（高度自動）。在下面的「附加的」JSFiddle模板中，您將看到包裝器包裝其所有內容，但不是水平居中。如果我從包裝中刪除浮動屬性，它將水平居中，但包裝不會包裝它的內容。希望有人能夠幫助我將其集中和包裝。預先感謝您的回覆。乾杯。馬克。

http://jsfiddle.net/xbcxs/1/

我的HTML：

<div id="wrapper"> 
    <div id="column1" class="column"> 
     <div id="contentOne" class="content">contentOne</div> 
     <div id="contentTwo" class="content">contentTwo</div> 
    </div> 
    <div id="column2" class="column"> 
     <div id="contentThree" class="content">contentThree</div> 
    </div> 
</div> 

我的CSS：

#wrapper { 
    margin:10px auto; 
    width:430px; 
    float:left; 
    height:auto; 
    border:2px solid blue; 
} 

.content { 
    border:1px solid black; 
    background-color:yellow; 
    width:200px; 
    height:100px; 
} 

.column { 
    float: left;   
} 

#contentThree { 
    height: 130px;   
} 

Answer 1

更改#wrapper CSS來：

#wrapper { 
    margin:10px auto; 
    width:430px; 
    height:auto; 
    border:2px solid blue; 
    overflow:hidden; 
} 

更新的jsfiddle：http://jsfiddle.net/xbcxs/2/

Answer 2

我前幾天 我用了同樣的問題：

top: 50%; position: absolute; 

在包裝css和它的工作對我來說很好。試試吧