新闻列表整体居中必须设宽度或换布局模式；直接给<ul>或<div>加margin: 0 auto无效，因块级元素默认占满父宽，需显式设width/max-width/fit-content；推荐fit-content适配标题长度；text-align: center仅对行内内容生效；若子项用float或inline-block须先清除或重置；Flex布局最稳妥，父容器设display: flex和justify-content: center即可水平居中，加align-items: center并确保父容器有高度（如min-height: 100vh）可实现垂直居中；子元素加margin: auto在flex中亦可二维居中；绝对定位+transform适用于脱离文档流场景，需父容器position: relative；justify-content: space-between会使首尾项贴边，非整体居中，应选space-around或space-evenly；父容器无明确尺寸时，flex居中属性可能失效。
新闻列表整体居中必须设宽度或换布局模式
直接给 <ul> 或 <div> 加 margin: 0 auto 没用，因为块级元素默认宽度占满父容器，左右外边距无空间可分。必须显式限制它的宽度。
-
width: 600px、max-width: 800px或width: fit-content都可以——推荐后者，它按内容长度自动收缩，适配不同长度的标题 - 别只写
text-align: center：它只影响内部文字、<span>、图片等行内内容，对整个<ul>无效 - 如果列表项用了
float或display: inline-block，先清除浮动或重置显示模式，否则margin: 0 auto仍不生效
Flex 布局是最省心的居中方案
不用算宽度、不依赖清除浮动、响应式友好。只需把新闻列表的直接父容器设为 flex 容器即可。
- 父容器加
display: flex和justify-content: center，水平居中立刻生效 - 如果还想垂直居中（比如列表在视口中央），补上
align-items: center，但前提是父容器有明确高度（如min-height: 100vh） - 若不想硬设高度，改用子元素加
margin: auto：它在 flex 容器里会同时作用于主轴和交叉轴，真正“二维居中” - 注意：flex 会让所有直系子元素变成 flex item，
float、vertical-align和传统margin对齐会失效
绝对定位 + transform 适合脱离文档流场景
当新闻列表需要覆盖在其他内容之上（比如搜索弹层、模态框），又必须精确定位时，这个组合最可靠。
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算，一滚动就飘走 - 子元素设
position: absolute、top: 50%、left: 50%，再加transform: translate(-50%, -50%) -
translate的百分比是按自身宽高算的，所以不依赖固定尺寸，适合动态标题长度 - 漏掉
transform就只剩左上角在中心点，视觉上必然右偏、下偏
多个列表项整体居中别用 space-between
如果新闻列表里每个 <li> 是独立卡片，你想让整组“浮动居中”，而不是首尾贴边，justify-content: space-between 是错的。
立即学习“前端免费学习笔记（深入）”；
-
space-between把首尾项顶到两边，中间空隙均分，不是居中 - 真正让整组像一个块一样居中的，是
space-around（两侧留半倍间隙）或space-evenly（所有间隙相等） - 如果父容器已经是
display: flex，子元素再写margin: 0 auto会被忽略——flex 已接管外边距行为
width/height/max-height，align-items 和 justify-content 都可能静默失效。 
