如何为播放图标添加完全对齐的白色圆形背景？

解决方案 #

你遇到的偏移问题核心是图标（默认由.et_pb_video_play的::before伪元素渲染）和设置了宽高的容器没有居中对齐，容器自带的默认布局规则、伪元素的默认偏移属性都会导致错位。
直接使用以下样式即可实现对齐效果：

.et_pb_video_play {
  color: #008ed4;      /* 图标颜色 */
  background: #ffffff; /* 背景颜色 */
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  /* 新增对齐属性 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 重置默认偏移属性，避免原有样式干扰 */
  position: relative;
  left: auto !important;
  top: auto !important;
  /* 保留该属性可让整个按钮在缩略图区域居中 */
  transform: translate(-50%, -50%) !important;
}

/* 重置图标伪元素的默认偏移 */
.et_pb_video_play::before {
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

如果需要实现「蓝色圆形背景、中间播放三角为白色」的效果，只需互换color和background的属性值即可：

.et_pb_video_play {
  color: #ffffff;
  background: #008ed4;
  /* 其余属性和上面代码保持一致 */
}

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