如何通过CSS html将容器中的列居中

Question

我使用边框显示容器的边缘，可以看到未在中心显示列。我已经尝试使用margin：auto;居中对齐;但是，它不起作用！我应该修复哪一部分？我坚持了很长时间。请帮助。

这是我的html：

<div class="container custom-container-width" style="border: 3px solid black; text-align=center;" >

<div class="row"  >
    {% for customer in Customer %}

    <div class="col-sm-3 p-3  gap-buffer " style="background-color:white;box-shadow: 10px 10px 5px grey; "  >

        <h3 style="text-align: center;"> {{ customer.name }} </h3>
          <div>
            <div class="table-responsive" >
               <table >
                  <thead class="thead-dark " >
                    <tr >
                      <th>Product</th>
                      <th>Count</th>
                      <th>Price</th>
                      <th>Subtotal</th>
                    </tr>
                  </thead>
                   <tbody >
                    {% for cart in Cart %}
                     {% if customer.id == cart.customer_id %}
                         {% for good in Good %}
                           {% if cart.id == good.cart_id %}
                          <tr>
                            <td>{{good.name}}</td>
                            <td>{{good.count}}</td>
                            <td>{{good.price}}</td>
                            <td> XXX</td>
                          </tr>
                            {% endif %}
                          {% endfor %}
                    {% endif %}
                   {% endfor %}

                      </tbody>
                    </table>
                <br>
                <P><strong>Total:</strong></P>
            </div>
        </div>
    </div>
    {% endfor %}
  </div>
</div>

间隙缓冲区CSS：

.gap-buffer {
margin:auto;
align:center;
}

预先感谢。

Answer 1

对于<div class="container custom-container-width"

Justify-content

用于x轴

align-items 

是y轴

 {

    display: flex;
    justify-content: center;

  }

[Display Flex在某些版本的浏览器中有一些限制

或您可以简单地使用

{
display:inline-block;
float:none;
verticle-align:top;
}

注意：不要忘记为容器的父项提供text-align:center