如何实现多列无序列表的居中并保持响应式特性？

解决方案 #

你原来使用的CSS多列布局本身天然具备响应式特性，只需要给 <ul> 新增几个样式属性即可实现居中，同时不破坏原有响应式效果：

修改后的完整代码（内联样式版）

<ul style="column-width: 300px; column-gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0; list-style-position: inside;">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
</ul>

新增属性说明

• margin: 0 auto：块级元素水平居中的核心配置，上下边距设为0，左右边距自动均分，实现列表整体居中
• max-width: 1200px：可根据业务需求调整数值，作用是限制列表最大宽度，避免超宽屏下列数过多影响阅读，小屏设备下会自动收缩宽度，不影响响应式表现
• padding: 0、list-style-position: inside：可选优化项，消除浏览器给<ul>默认添加的左内边距，让列表符号和内容对齐更整齐

可复用CSS类版

如果需要多处使用该样式，可把样式提取为公共类：

.multi-column-list {
  column-width: 300px;
  column-gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style-position: inside;
}

HTML中直接引用即可：

<ul class="multi-column-list">
  <!-- 列表项内容 -->
</ul>

修改后列表会自动根据屏幕宽度调整列数：宽度小于340px时自动变为1列，宽度在640px左右时变为2列，980px左右时变为3列，同时始终保持水平居中。

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