为何设置position:absolute的元素用left/right:0无法居中？如何实现？

你当前的代码里，.contact-card设置left:0; right:0;后没达到居中效果，是因为没有给该元素设置宽度，此时absolute元素会默认撑满父容器的可用宽度，自然看不出居中效果。下面分两种场景给出实现方案：

1. 仅水平居中 #

修改.contact-card的CSS：

.contact-card {
  position: absolute;
  left: 0;
  right: 0;
  /* 指定元素宽度，比如和图片一致或按需设置 */
  width: 225px;
  /* 左右margin设为auto，利用absolute元素的自动分配空间特性 */
  margin: 0 auto;
}

原理：当absolute元素同时设置left:0和right:0时，元素的可用宽度被限定在父容器内，此时设置margin-left:auto和margin-right:auto（简写margin:0 auto），浏览器会自动将左右空白空间均分，实现水平居中。

2. 水平+垂直同时居中 #

如果需要让.contact-card在.contacts容器里完全居中（水平+垂直），可以在上述基础上添加top:0和bottom:0，同时设置上下margin为auto：

.contact-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 225px;
  /* 上下左右margin都设为auto */
  margin: auto;
  /* 可选：防止元素内容溢出时撑破容器 */
  overflow: auto;
}

原理：和水平居中逻辑一致，同时设置top:0和bottom:0后，元素的可用高度被限定在父容器内，margin:auto会自动均分上下空白空间，实现垂直居中。

额外说明 #

• 如果不想固定.contact-card的宽度，可以用max-width: 100%替代固定宽度，保证元素在父容器内自适应且不溢出。
• 你的图片已经设置了width:225px，所以给.contact-card设置相同宽度可以让卡片和图片对齐，整体更规整。

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