当父元素和子元素的 % 宽度不同时如何使子 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

您可以为 .insideRows

使用 flexbox

* {
  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>

当父元素和子元素的 % 宽度不同时如何使子 div 居中

How to center child div when both the parent and child elements have different % widths

html

css

width

centering

responsive-design