如何创建随屏幕尺寸自适应大小的CSS向下箭头？

问题出在你用固定的margin-top: 0.2vw调整箭头位置，视窗缩放时这个固定值和父元素的比例会失衡，导致箭头偏移。改用flex布局或绝对定位+transform实现箭头居中，就能彻底解决问题，同时保留vw单位的自适应特性。

方案一：Flex布局（推荐） #

利用flex的居中属性，让箭头自动保持在圆圈中心，无需手动计算margin：

.bottom {
  display: inline-flex; /* 改为flex容器 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 2vw;
  height: 2vw;
  border: 0.2vw solid #333;
  border-radius: 50%;
}

.bottom:after {
  content: '';
  width: 0.7vw;
  height: 0.7vw;
  border-top: 0.2vw solid #333;
  border-right: 0.2vw solid #333;
  transform: rotate(135deg);
  /* 移除原margin-top，flex自动完成居中 */
}

方案二：绝对定位+Transform #

如果不想用flex，也可以用绝对定位配合transform实现精准居中：

.bottom {
  display: inline-block;
  position: relative; /* 作为伪元素的定位容器 */
  width: 2vw;
  height: 2vw;
  border: 0.2vw solid #333;
  border-radius: 50%;
}

.bottom:after {
  content: '';
  position: absolute;
  top: 50%; /* 垂直方向居中基准 */
  left: 50%; /* 水平方向居中基准 */
  width: 0.7vw;
  height: 0.7vw;
  border-top: 0.2vw solid #333;
  border-right: 0.2vw solid #333;
  transform: translate(-50%, -50%) rotate(135deg);
  /* translate(-50%,-50%) 基于自身尺寸偏移，确保完全居中 */
}

两种方案都能保证窗口缩放时箭头始终在圆圈中心，且所有单位使用vw，和你其他CSS属性的自适应逻辑保持一致。

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