头像居中但不破坏响应式流式结构应使用mx-auto+block，配合col断点控制；字段标签左对齐、值绝对定位居中；头像与资料区用d-flex flex-column flex-md-row控制堆叠；圆角用rounded-circle，阴影按屏幕切换，尺寸统一靠h-100/w-100+aspect-ratio或padding-top兼容旧Safari。
头像居中但不破坏响应式流式结构
直接给 <img> 加 text-center 或 center-block 在 Bootstrap 5+ 中已失效——这些类被移除或语义弱化，且会把整个父容器内容强行居中，导致字段标签也偏移。真正可控的方式是用 mx-auto + 块级显示，同时保留 col 的响应式断点控制。
<img> 必须设为 block（默认是 inline），否则 margin: auto 不生效
- 宽度建议用
w-25或固定值如width: 120px，避免在小屏撑满整行 - 外层用
<div class="col-12 col-md-6 col-lg-4 mx-auto">控制最大宽度和居中范围，比单纯靠text-center更可靠 - 别用
float包裹头像——它会脱离文档流，后续的资料字段容易错位
头像与资料区在不同断点下的堆叠逻辑
Bootstrap 的 flex-column 默认在 xs 断点生效，但头像和资料区需要更精细的控制：大屏横排（头像左、资料右），小屏竖排（头像上、资料下）。
- 用
d-flex flex-column flex-md-row实现基础堆叠切换 - 配合
justify-content-md-start和align-items-md-center微调横排时的对齐 - 若资料区含多行文本，加
gap-3替代手动mb-3，避免小屏下间隙过大 - 避免在
flex-md-row容器里对子项再设col类——这会触发栅格重计算，导致宽度冲突
字段标签左对齐、值居中对齐的响应式实现
常见错误是直接用 text-center，结果标签和值一起居中；或用 justify-content: space-between，值过长时右侧溢出。
推荐结构：<p class="position-relative mb-3"><strong class="float-start">Email</strong>xxx@example.com</p>
-
float-start锚定标签到左侧，不占文档流宽度 -
position-relative为值提供定位上下文 - 值本身无需额外类，纯文本即可被
text-align: center影响（父容器需设该样式） - 小屏字段过多时，可加
@media (max-width: 576px)把整行设为text-center，此时字段少，视觉可接受
圆角、阴影与尺寸适配旧 Safari 的兼容写法
现代写法如 rounded-circle 和 shadow-sm 在 Safari 15.4 以下可能失效，尤其配合 aspect-ratio 时。
- 头像圆角必须用
rounded-circle，不要用rounded-pill或自定义border-radius: 50%—— 后者在某些 Safari 版本下会因缩放失真 - 阴影按屏幕切换：小屏用
shadow-none，中屏起用shadow-sm，大屏加shadow；避免直接写box-shadowCSS - 尺寸统一靠
h-100 w-100+aspect-ratio: 1，但旧 Safari 不支持aspect-ratio，得回退到padding-top: 100%+position: absolute布局 - 如果项目必须兼容 iOS 14.5 及更早，头像容器要显式设
min-width: 120px和min-height: 120px，防止h-100在 flex 容器中塌陷
min-height 没设，导致小屏下文字上浮压住头像；还有就是 Safari 下 object-fit: cover 配合 transform: translate(-50%, -50%) 必须搭配 width: 100% 和 height: 100% 才生效，漏掉任一都会居中失败。 
