Css 如何使用内联块（响应）将列对齐到较小屏幕的中心

我的带有列的行工作得很好，但在较小的屏幕上，它是左对齐的，应该居中。我已经尝试了数百个教程，但没有任何积极的结果。必须简单，如需任何帮助，请提前发送thx:）

HTML:

---

我试着把它做成网格、内联网格和其他不同的样式。内联块工作完美，但不响应。也许解决办法很简单。谢谢

我不确定您是否真的需要更改您的

行

，以在尝试以下操作后获得您想要的结果：

唯一需要更改的是将

位置：相对

和

显示：内联块

添加到

框

，因为您已经为此类设置了宽度和边距。添加上述两个属性将确保它们始终居中对齐

/*提供开始部分*/
.集装箱{
文本对齐：居中；
保证金：0自动；
}
.集装箱{
显示：内联块；
垂直对齐：中间对齐；
浮动：无；
}
.栏目{
宽度：33.33%；
右边填充：0；
左侧填充：0；
利润率：-10px；
}
@媒体屏幕和屏幕（最大宽度：767.98px）{
.栏目{
宽度：100%！重要；
}
}    
@媒体屏幕和屏幕（最大宽度：991.98px）{
.栏目{
宽度：50%；
}
}
.行{
文本对齐：居中；
保证金：0自动；
}
.行.列{
显示：内联块；
垂直对齐：中间对齐；
浮动：无；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.盒子{
位置：相对位置；
显示：内联块；
宽度：300px；
填充：10px；
利润率：30像素；
盒影：0px 0px 10px 1px rgba（1361360.226）；
边界半径：30px 30px 30px 30px；
边框：0px实心#fff；
文本对齐：居中；
}

  <div class="container">
    <div id="offer" class="row">
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        <div class="box">
        </div>
      </div>
      <div class="column">
        </div>
      </div>
    </div>
  </div>  

    /* Offer start Section*/
.container {
    text-align:center;
    margin:0 auto;
  }
.container .row {
    display:inline-block;
    vertical-align: middle;
    float: none;
  }
.column {
    width: 33.33%;
    padding-right: 0;
    padding-left: 0;
    margin: -10px;
  }
@media screen and (max-width: 767.98px) {
    .column {
      width: 100%!important;
    }
}    
@media screen and (max-width: 991.98px) {
    .column {
    width: 50%;
    }
}
.row {
    text-align:center;
    margin:0 auto;
}
.row .column {
    display:inline-block;
    vertical-align: middle;
    float: none;
}
  /* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.box {
    width: 300px;
    padding: 10px;
    margin: 30px;
    box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
    border-radius: 30px 30px 30px 30px;
    border: 0px solid #fff;
    text-align: center;
}