如何在父元素和子元素具有不同的％宽度时居中子div

Question

我有两行，每行有三个div。当行的宽度为100％，每个div的宽度为28％时，如何将每行中的三个div居中？我也试图让div保持中心，并对不同设备（如手机，平板电脑，台式机和笔记本电脑）作出响应。

我已经试过：

margin: 0 auto; 
display: inline-block; 

和：

left: 50%; 
right: 50%; 

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 

 
/*Phones*/ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
.insideRows { 
 
    margin: 0 auto; 
 
} 
 

 
.buttons { 
 
    font-size: 20px; 
 
    color: black; 
 
    border: solid 3px #3366ff; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    text-align: center; 
 
} 
 

 

 
/*For Tablets*/ 
 

 
@media only screen and (min-width: 600px) { 
 
    .col-m-5 { 
 
    width: 41.66%; 
 
    } 
 
} 
 

 

 
/*For Desktops/Laptops*/ 
 

 
@media only screen and (min-width: 768px) { 
 
    .col-3 { 
 
    width: 28%; 
 
    } 
 
    .col-12 { 
 
    width: 100%; 
 
    } 
 
}

<div class="col-12 row"> 
 
    <div class="insideRows"> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 1</div> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 2</div> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 3</div> 
 
    </div> 
 
    <div class="insideRows"> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 1</div> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 2</div> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 3</div> 
 
    </div> 
 
</div>

Answer 1

可以使用Flexbox的用于.insideRows

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.insideRows { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 

 
/*Phones*/ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
.insideRows { 
 
    margin: 0 auto; 
 
} 
 

 
.buttons { 
 
    font-size: 20px; 
 
    color: black; 
 
    border: solid 3px #3366ff; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    text-align: center; 
 
} 
 

 

 
/*For Tablets*/ 
 

 
@media only screen and (min-width: 600px) { 
 
    .col-m-5 { 
 
    width: 41.66%; 
 
    } 
 
} 
 

 

 
/*For Desktops/Laptops*/ 
 

 
@media only screen and (min-width: 768px) { 
 
    .col-3 { 
 
    width: 28%; 
 
    } 
 
    .col-12 { 
 
    width: 100%; 
 
    } 
 
}

<div class="col-12 row"> 
 
    <div class="insideRows"> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 1</div> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 2</div> 
 
    <div class="col-3 col-m-5 buttons">Row 1 Column 3</div> 
 
    </div> 
 
    <div class="insideRows"> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 1</div> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 2</div> 
 
    <div class="col-3 col-m-5 buttons">Row 2 Column 3</div> 
 
    </div> 
 
</div>