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和它的工作对我来说很好。试试吧