新闻列表父容器需设明确宽度（如width/max-width/fit-content）才能用margin: 0 auto居中；若用Flex布局，只需父容器display: flex并justify-content: center，无需设宽且兼容性好。
新闻列表的父容器必须有明确宽度才能居中
直接给 <ul> 或 <div> 加 margin: 0 auto 没用，因为块级元素默认宽度占满父容器，auto 左右外边距失去计算依据。必须先限制它的宽度。
- 用
width: 600px、max-width: 800px或width: fit-content显式设宽（推荐后者，适配内容长度） - 避免只设
text-align: center—— 它只居中文本和内联元素，对<li>这类块级子项无效 - 如果列表项用了
float或display: inline-block，先清除浮动或重置显示模式，否则margin: 0 auto仍不生效
CSS Flex 布局是最稳妥的居中方式
不用算宽度、不依赖 float 清除、响应式友好。把新闻列表的直接父容器设为 flex 容器即可。
<div class="news-container">
<ul class="news-list">
<li>头条：AI新规出台</li>
<li>本地：地铁新线开通</li>
</ul>
</div>对应 CSS：
.news-container {
display: flex;
justify-content: center;
}
.news-list {
list-style: none;
padding: 0;
margin: 0;
}-
justify-content: center控制主轴（默认水平）居中，align-items不需要设，除非你想垂直居中 - 确保
.news-list没有意外的float、position: absolute或display: block覆盖，否则会退出 flex 流 - 移动端下若列表项过宽撑破容器，加
flex-wrap: wrap和max-width更安全
用 text-align + inline-block 组合也能行，但要小心换行
适合兼容老浏览器（IE9+），原理是把列表当“文字”处理：父容器 text-align: center，列表本身 display: inline-block。
立即学习“前端免费学习笔记（深入）”；
.news-wrapper {
text-align: center;
}
.news-list {
display: inline-block;
text-align: left; /* 防止列表项内文字也被居中 */
list-style: none;
margin: 0;
padding: 0;
}- 必须重置
text-align: left到<li>或.news-list，否则标题也会居中，阅读体验差 -
inline-block元素间有空格会生成间隙，用font-size: 0在父容器上或删 HTML 换行可消除 - 这个方案在列表项多、宽度超视口时容易折行错位，不如 flex 可控
别忽略移动端断点和列表项内边距
居中看起来没问题，但真机上常因未适配小屏或内边距溢出导致横向滚动条——这是最隐蔽的“伪居中”。
- 检查
<li>是否有固定width或大padding/margin，尤其右侧；用box-sizing: border-box统一盒模型 - 加媒体查询：
@media (max-width: 480px) { .news-list { width: 100%; } }，避免小屏下内容被截断 - 如果用了
margin: 0 auto但没生效，打开浏览器开发者工具，看 computed 样式里width是不是真的被计算出来了（比如被min-width或flex-shrink干扰）
实际调试时，先用 flex 方案，再检查子项是否意外设置了 float 或 position，最后拿手机预览滚动条——这三个动作做完，基本就没漏了。
