如何让绝对定位的浮动卡片在父Div中居中且自适应内容宽度？

针对你遇到的绝对定位卡片需自适应内容宽度且在父容器（地图）上方居中的问题，可通过以下两种简洁方案解决：

方案一：inline-block + 平移居中 #

给卡片添加如下CSS样式：

.card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block; /* 让卡片宽度由内容决定，不撑满父容器 */
  /* 可选：若需内容自动换行，可添加 max-width 限制，比如 max-width: 80%; */
}

• display: inline-block 会让卡片宽度贴合内部元素尺寸，避免撑满父容器
• left: 50% 配合 transform: translateX(-50%) 实现水平居中，无需提前知道卡片宽度，适配内容变化

方案二：fit-content + 自动外边距 #

利用CSS3的fit-content属性实现自适应宽度，再通过外边距居中：

.card {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content; /* 宽度自适应内容 */
}

• width: fit-content 让卡片宽度刚好包裹内容，主流现代浏览器均支持
• left: 0和right: 0配合margin: 0 auto，实现水平居中

关键前提 #

父容器必须设置position: relative，确保卡片的绝对定位是相对于父容器（地图）进行的，同时地图的可选中状态不会受到影响，因为绝对定位元素不会阻断父元素的交互事件。

内容的提问来源于stack exchange，提问作者Alvaro Bataller