Howtomovefloateddivstothecentreofacontainer

I've got two rows of boxes inside a container and I need them to be in the center of the page. I cannot set the width of the container because the stuff inside might change.

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

The reason why I don't break up the boxes into two rows within the HTML is because I'm using media queries to force two rows when the screen is tight, but it would naturally be one row when there is space on the screen.

我没有在HTML中将这些框分成两行的原因是因为我在屏幕紧张时使用媒体查询强制两行,但当屏幕上有空格时,它自然会是一行。

Note that I have an empty div for clearfix. Feel free to remove it if you think there is a better method.

请注意,我有一个空的div for clearfix。如果您认为有更好的方法,请随意删除它。

Here's my HTML:

这是我的HTML:

    
1
    
2
    
3
    
4
    

And here's my CSS:

这是我的CSS:

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

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

.container {
    background-color: grey;
}

The container is grey for illustration only, in my app it would be clear.

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

Fiddle here

3 个解决方案

.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;
}

    

        
1
        
2
        
3
        
4
        

    

.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;
}

    

        
1
        
2
        
3
        
4
        

    

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

   

        
1
        
2
        
3
        
4
        

   

`
    
  
    
    
1
    
    
2
    
    
3
    
    
4
    
    
    
    
    
`