box-shadow本身不影响居中，margin:0 auto失效的根本原因是元素未满足块级居中前提（明确宽度+display:block）；推荐用Flex布局居中，其次可用绝对定位+transform，表格等特殊元素需额外处理盒模型。
直接给带 box-shadow 的元素加居中样式，阴影本身不会影响居中逻辑——但很多人卡在「明明写了 margin: 0 auto 却不居中」，根本原因不是阴影，而是元素没满足块级居中前提。
为什么 margin: 0 auto 对带阴影的 div 不生效
这个写法只对「有明确宽度 + display 为 block（或 inline-block）」的块级元素有效。常见失效场景：
- 元素是
inline（比如没设display的span或图片） - 元素 width 是
auto且内容撑开（如未设宽的div默认占满父容器） - 父容器用了
display: flex或grid，但子元素没配对齐属性 - 阴影本身不影响盒模型，但有人误以为
box-shadow会改变尺寸，其实不会
box-shadow 元素用 Flex 布局居中（推荐）
最稳、最现代的方式，不依赖元素宽度，也不怕内边距或边框干扰：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 或固定高度 */
}
<p>.shadow-box {
width: 300px;
height: 200px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}注意：box-shadow 不参与 flex 项目的尺寸计算，所以无需额外处理阴影溢出。
立即学习“前端免费学习笔记（深入）”；
用绝对定位 + transform 居中（兼容老浏览器）
适合需要脱离文档流、或父容器高度不确定的场景：
.parent {
position: relative;
height: 500px; /* 需有高度 */
}
<p>.shadow-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 180px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}关键点：
- 必须设
width和height，否则transform仍以内容尺寸为基准 -
box-shadow的偏移值（如2px 2px）不会破坏居中，因为transform作用于整个盒模型（含阴影渲染区域） - 若阴影很大（比如
0 0 40px），视觉上可能看起来“偏下”，其实是阴影向下扩散导致——可微调transform的 y 值补偿，例如translate(-50%, -50%);改成translate(-50%, -52%);
表格或不规则形状元素的阴影居中要特别注意
比如给 <table> 加 box-shadow 后居中，容易因 border-collapse: collapse 导致阴影被裁切或错位：
- 务必加
border-collapse: separate+border-spacing: 0，否则某些浏览器下阴影位置异常 - 若用
margin: 0 auto，必须显式设table-layout: fixed和width，否则表格宽度由内容决定，auto失效 - 更稳妥的做法：把
<table>包进一个<div class="wrapper">，对 wrapper 居中，再让 table 自身display: block
阴影本身从不阻碍居中，真正绊住人的永远是盒模型理解偏差和布局上下文遗漏。
