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 - 包装器定位问题

2 个答案: