Question

我在容器内有两排盒子，我需要它们位于页面的中心。我无法设置容器的宽度，因为里面的东西可能会改变。

我之所以没有将HTML分成两行，是因为我在屏幕紧张时使用媒体查询来强制两行，但当它在屏幕紧张时会强行插入两行，屏幕上有空间。

请注意，我有一个用于clearfix的空div。如果您认为有更好的方法，请随意将其删除。

这是我的HTML：

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div style="clear: both;"></div>
</div>

这是我的CSS：

.box {
    width: 50px;
    height: 50px;
    background: red;
    color: white;
    margin: 10px;
    float: left;
}

.box:nth-child(3) {
    clear: both;
}

.container {
    background-color: grey;
}

容器是灰色的仅用于说明，在我的应用程序中它很清楚。

小提琴here

Answer 1

如果你可以包装元素，那么你可以将包装元素的display设置为inline-block，然后将text-align: center添加到父元素以进行水平居中：

Updated Example

.container {
    background-color: grey;
    text-align: center;
}
.container .center-wrapper {
    display: inline-block;
}
.box {
    text-align: left;
}

.box {
    width: 50px;
    height: 50px;
    background: red;
    color: white;
    margin: 10px;
    float: left;
    text-align: left;
}
.box:nth-child(3) {
    clear: both;
}
.container {
    background-color: grey;
    text-align: center;
}
.container .center-wrapper {
    display: inline-block;
}

<div class="container">
    <div class="center-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div style="clear: both;"></div>
    </div>
</div>

使用flexbox，您还可以使用以下内容：

Updated Example

.container {
    background-color: grey;
    display: flex;
    justify-content: center;
}

.box {
    width: 50px;
    height: 50px;
    background: red;
    color: white;
    margin: 10px;
    float: left;
}
.box:nth-child(3) {
    clear: both;
}
.container {
    background-color: grey;
    display: flex;
    justify-content: center;
}

<div class="container">
    <div class="center-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div style="clear: both;"></div>
    </div>
</div>

Answer 2

你可以添加一个容器div并给它一个宽度和边距：0 auto; http://jsfiddle.net/oc0w0n4n/1/

.center{
   margin: 0 auto;
   width:140px;
}

   <div class="center">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div style="clear: both;"></div>
   </div>

Answer 3

`<div class="container">    
  <div align="center" style="padding-left: 532px;">    
    <div class="box">1</div>    
    <div class="box">2</div>    
    <div class="box">3</div>    
    <div class="box">4</div>    
    <div style="clear: both;"></div>    
    </div>    
</div>`

如何将浮动的div移动到容器的中心

3 个答案: