卡片内图文水平居中用text-align: center（父容器），块级元素用margin: 0 auto（需定宽），图文双向居中用flex布局（display: flex、justify-content: center、align-items: center且父容器有高度）。
卡片内部元素居中，不是靠“居中”这个词本身，而是看它属于什么类型、在什么容器里、要对齐哪个方向——text-align、margin: 0 auto、flex、grid 各管各的，混用就容易错位或失效。
卡片内文字和图片怎么水平居中？
文字和 <img> 默认是行内级，它们的水平居中得靠父容器控制，不是自己设样式。
-
text-align: center加在卡片（比如.card）上，就能让里面所有文字、图片、<span>水平居中 - 如果图片单独加了
display: block，再配margin: 0 auto也行，但没必要多一层——直接用text-align更省事 - 别给
<p>或<h3>自己设text-align: center，除非你只想居中这一段，而不是整个卡片内容
卡片内块级元素（比如按钮、子容器）怎么水平居中？
块级元素（如 <div>、<button>）不会响应 text-align，必须用别的方法。
- 如果它有固定宽度（比如
width: 200px），直接加margin: 0 auto就能居中 - 如果宽度不固定（比如内容撑开、用了
max-width），margin: 0 auto依然有效，前提是没被float或position: absolute干扰 - 如果卡片本身用了
display: flex，那子元素加margin: auto会把它推到中间——但这其实是 flex 的“自动外边距”行为，不是传统块级居中逻辑
卡片内容要水平+垂直居中怎么办？
单靠 text-align 或 margin 搞不定垂直方向，得靠布局模型。
立即学习“前端免费学习笔记（深入）”；
- 最稳的是给卡片加
display: flex+justify-content: center+align-items: center—— 注意：父容器（卡片）要有明确高度，或者内容能撑高，否则align-items不生效 - 如果卡片里还有多层嵌套，别在每一层都加 flex，容易嵌套冲突；只在最外层卡片设一次就够了
- 用
display: grid+place-items: center更简洁，但 IE 不支持，现代项目没问题 - 避免用
position: absolute+top: 50%+transform: translateY(-50%)，它会让元素脱离文档流，影响阴影渲染边界，尤其卡片带box-shadow时容易被裁掉
阴影和居中一起用时最容易踩的坑
阴影本身不影响居中逻辑，但它会让视觉判断出错——你以为居中了，其实阴影偏移暴露了不对齐。
- 检查
box-shadow的h-offset和v-offset是否为0，比如box-shadow: 0 4px 12px rgba(0,0,0,0.1)是安全的；写成2px 4px...就会让整个卡片“看起来”右偏 - 卡片用了
transform: scale()或rotate()，会创建新层叠上下文，可能让box-shadow渲染异常，同时干扰 flex/grid 的对齐感知 - 卡片父容器设了
overflow: hidden，不仅可能裁剪阴影，还会让transform居中的元素边缘发虚——这不是居中失败，是渲染层被截断
