价格居中需据其显示类型选择方案：行内元素用父容器text-align:center；固定宽块级元素用margin:0 auto；flex布局用align-items:center；绝对定位元素用left:50%+transform。
卡片里价格是行内元素（比如 <span> 或纯文本）
这种情况最常见：价格写在 <div class="card"> 里，用 <span class="price">¥99</span> 包裹。它本质是行内级内容，不能直接加 margin: 0 auto。
正确做法是给卡片容器（即价格的父元素）加 text-align: center：
.card {
text-align: center;
}
.price {
/* 不需要额外居中样式 */
}注意点：
- 如果卡片内部用了
float、position: absolute或display: flex，text-align就会失效 - 图片或图标紧挨着价格时，也要确保它们是
display: inline-block或默认行内行为，否则会掉行或错位 - IE8+ 都支持，兼容性无压力
价格是块级元素（比如 <div class="price">）且宽度固定
有些卡片把价格单独抽成一个块容器，还设了 width: 120px 这类固定值。这时它不再是“靠父容器对齐”，而是要自己居中。
立即学习“前端免费学习笔记（深入）”；
必须同时满足两个条件：
- 给价格元素自身设明确
width - 设
margin: 0 auto
示例：
.price {
width: 100px;
margin: 0 auto;
}常见翻车点：
- 忘了写
width—— 浏览器算不出左右空隙，auto就变成0 - 父容器用了
display: flex或position: relative，但没意识到这会干扰块级居中逻辑 - 加了
float: left或position: absolute，直接让margin: auto失效
卡片整体用 Flex 布局，价格只是其中一个子项
现代卡片组件基本都用 display: flex，价格常和标题、描述并列。此时别再折腾 text-align 或 margin，直接控制父容器。
给卡片内容区（价格所在父容器）设：
.card-content {
display: flex;
flex-direction: column;
align-items: center; /* 垂直于主轴方向居中 → 水平居中 */
}关键说明：
-
align-items: center对flex-direction: column来说就是水平居中；对row就是垂直居中 - 价格元素本身不用任何样式，哪怕它是
div或p都自动生效 - IE10–11 对
align-items有 bug，若需兼容，改用justify-content: center+ 调整主轴方向
价格绝对定位在卡片右下角但又要水平居中对齐
比如促销标签“-20%”贴在卡片右上角，但设计稿要求它相对于价格文字水平居中——这时你面对的是“脱离文档流的子元素如何相对另一个元素居中”。
不能只靠 left: 50%，得结合参照物：
- 确保价格文字容器有
position: relative - 把标签设为
position: absolute - 用
left: 50%+transform: translateX(-50%)
示例：
.price-wrapper {
position: relative;
}
.discount-tag {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -8px;
}容易漏的细节：
- 忘了给父容器设
position: relative，导致标签相对整个页面定位 - 用
calc(50% - Xpx)硬算，但价格文字宽度动态变化（比如多语言），就失准 -
transform在低版本 Android WebView 中需加-webkit-前缀
真正麻烦的不是“怎么写一行居中代码”，而是看到价格元素第一眼就得判断：它当前在 DOM 里是什么显示类型、有没有被父级布局接管、是否参与文档流——这些状态决定了哪条路能走通，哪条路写着“此路不通”。
