使用Styled Components实现图标居中对齐的问题咨询

你当前的样式仅将元素的左上角定位到了父容器的中心位置，没有修正元素自身宽高带来的偏移，因此无法实现完全居中，可按需选择以下方案修复：

• 方案1：使用transform偏移修正（最通用，无需提前知晓图标尺寸）
  修正后的样式代码：

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 额外注意：该元素的父容器必须设置 position: relative，否则定位会相对于全局视口 */
`;

• 方案2：使用负margin修正（仅适合固定宽高的图标）
  假设你的Play图标固定宽高为40px，样式可以这么写：

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
`;

• 方案3：父容器使用Flex布局（无需子元素绝对定位）
  给图标所在的父容器添加如下样式即可让内部图标自动居中：

const VideoWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

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