如何实现迷你横幅在不同屏幕尺寸下响应式居中显示

需要实现站点Logo迷你横幅在不同屏幕尺寸下始终居中、具备响应式效果，目前大屏展示正常，小屏尺寸下横幅无法正常居中。
现有CSS代码如下：

<style>
  .logo-bar-section {
    max-width: {
      {
        section.settings.logo_width
      }
    }
    ;
    display: inline-block;
    width: 100px;
    height: 100px;
    /*     margin: 0 27.5px 30px; */
    margin-left: 250px;
    text-align: center;
  }
  
  .whole {
    background-color: #ebf2ef;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    margin: 0 auto;
  }
</style>

现有HTML（含Shopify Liquid模板逻辑、板块schema配置）代码如下：

<div>
  <h2>{{ section.settings.title | escape }}</h2>
  {% if section.blocks.size > 0 %}
  <ul class="whole">
    {% for block in section.blocks %}
    <li class="logo-bar-section" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
      <a href="{{ block.settings.link }}">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if block.settings.link != blank %}
            </a> {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

{% schema %} { "name": "Logo list", "class": "index-section", "max_blocks": 10, "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Logo list" }, { "type": "select", "id": "logo_width", "label": "Logo width", "default": "150px",
"options": [ { "label": "Extra Small", "value": "100px" }, { "label": "Small", "value": "125px" }, { "label": "Medium", "value": "150px" }, { "label": "Large", "value": "175px" }, { "label": "Extra Large", "value": "200px" } ] } ], "blocks": [ { "type":
"logo_image", "name": "Logo", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "url", "id": "link", "label": "Link", "info": "Optional" } ] } ], "presets": [ { "name": "Logo list", "category": "Image", "blocks": [ {
"type": "logo_image" }, { "type": "logo_image" }, { "type": "logo_image" }, { "type": "logo_image" } ] } ] } {% endschema %}

现有代码存在4个核心问题导致小屏无法居中：

• 给.logo-bar-section硬编码了margin-left: 250px固定左边距，小屏幕下该固定值会直接将内容推到视口外，无法自适应居中
• Liquid变量输出语法错误：{{ section.settings.logo_width }}被拆成多行带多余空格，Liquid解析时会生成无效CSS值，导致max-width配置不生效
• 父容器.whole是ul元素，浏览器默认会给ul加40px左侧内边距，且没有设置内容居中规则；子元素用inline-block布局时，父元素未声明text-align: center无法触发子元素居中，同时li默认的列表样式也未清除
• 子元素宽度硬编码为100px，和后台配置的logo宽度选项冲突，无法跟随配置调整尺寸

替换原有CSS代码为以下内容即可：

<style>
  .whole {
    background-color: #ebf2ef;
    padding: 20px 16px;
    width: 100%;
    margin: 0 auto;
    list-style: none;
    text-align: center;
    box-sizing: border-box;
    font-size: 0; /* 清除inline-block元素间的默认空白间隙 */
  }
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    width: 100%;
    height: 100px;
    margin: 0 12px 16px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 16px; /* 恢复父元素清除的字体大小 */
  }
  .logo-bar-section img {
    max-width: 100%;
    height: auto;
  }
  /* 适配小屏设备，自动换行 */
  @media screen and (max-width: 767px) {
    .logo-bar-section {
      margin: 0 8px 12px;
    }
  }
</style>

• 移除硬编码的250px左边距，改用父元素text-align: center配合子元素inline-block实现自动居中，适配所有屏幕尺寸
• 修正Liquid变量写法，去掉多余换行和空格，保证后台配置的logo宽度能正常生效
• 清除ul默认的左侧内边距、列表样式，添加box-sizing: border-box保证内边距不会让元素宽度超出视口
• 给图片添加max-width:100%自适应规则，避免图片溢出容器
• 增加小屏媒体查询适配，调整间距保证移动端展示效果，支持logo自动换行

内容的提问来源于stack exchange，提问作者dekiv