当父元素和子元素都具有不同的百分比宽度时如何使子 div 居中

Posted 2023-03-05

【中文标题】当父元素和子元素都具有不同的百分比宽度时如何使子 div 居中

【英文标题】：How to center child div when both the parent and child elements have different % widths

【发布时间】：2018-01-14 08:48:49

【问题描述】：

我有两行，每行三个 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>

【参考方案1】：

您可以为.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>