使用 CSS linear-gradient 在水平方向上指定三个色标（左深蓝、中浅蓝、右深蓝），即可轻松创建以页面中心为对称轴的双向渐变背景，无需额外 DOM 元素或复杂布局。
使用 css `linear-gradient` 在水平方向上指定三个色标（左深蓝、中浅蓝、右深蓝），即可轻松创建以页面中心为对称轴的双向渐变背景，无需额外 dom 元素或复杂布局。
要实现「中心浅蓝、向左右对称过渡为深蓝」的背景效果，关键在于理解 CSS 渐变的色标（color stop）机制。原代码 linear-gradient(to right, #3498db, #162ba4) 是单向线性渐变，导致颜色从左到右单调变化，缺乏对称性。而真正的对称渐变本质是：在水平方向上，颜色从左侧深蓝 → 中心浅蓝 → 右侧深蓝，即形成一个以中心为顶点的“V”形色彩分布。
只需将 background 属性替换为 background-image，并定义三段式色标：
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: linear-gradient(to right, #162ba4, #3498db, #162ba4);
}这里 to right 表示渐变方向为水平向右，三个颜色值 #162ba4（深蓝）、#3498db（浅蓝）、#162ba4（深蓝）会自动均匀分布在 0%、50%、100% 位置，天然形成视觉对称。浏览器会自动插值过渡，无需手动计算百分比——除非需要微调对称点位置（例如让浅蓝略偏左/右），此时可显式指定色标位置：
/* 如需精确控制浅蓝位于 50% 中心 */ background-image: linear-gradient(to right, #162ba4 0%, #3498db 50%, #162ba4 100% );
⚠️ 注意事项：
- 避免同时使用 background 和 background-image 简写属性覆盖——推荐统一用 background-image，并确保 background-color 未意外遮挡渐变；
- 若后续需添加背景图片或固定定位效果，建议将渐变作为第一层 background-image，用逗号分隔多层背景；
- 此方案完全基于 CSS，不新增 HTML 结构，杜绝了浮动双 div 带来的布局干扰和维护负担，也兼容所有现代浏览器（包括 Safari 12.1+）。
最终效果简洁、语义清晰、性能高效，是实现中心对称渐变背景的最佳实践。
