如何实现类名为.stroke1的SVG点元素在页面中居中显示

算力阿峰

2026-10-7

问题原因

justify-content、align-items属于flex容器属性，只能写在设置了display:flex的父元素上，你把这两个属性写在子元素.stroke1上完全不生效
你给.stroke1设置了position: absolute，会让该元素脱离普通文档流，父元素.strokes的flex布局默认无法控制它的位置
text-align: center的作用是让容器内部的行内/行内块元素居中，直接写在.stroke1自身上，无法让这个元素本身在父容器内居中

解决方案

方案1：无需保留绝对定位，用父级flex居中（更推荐）

直接修改你的CSS代码即可：

.strokes {
  display: flex;
  width: 100%;
  /* 新增水平居中属性 */
  justify-content: center;
  /* 如果需要垂直居中可以再加align-items: center，同时给.strokes设置对应高度即可 */
}

.stroke1 {
  z-index: 1002;
  /* 删掉多余的position: absolute、justify-content、text-align、align-items属性 */
}

方案2：业务需要保留`.stroke1`的绝对定位属性

如果你的场景必须用绝对定位，修改CSS如下：

.stroke1 {
  position: absolute;
  z-index: 1002;
  /* 新增水平居中代码 */
  left: 50%;
  transform: translateX(-50%);
  /* 如果需要同时垂直居中，再加top: 50%; 把上面的transform改成translate(-50%, -50%)即可 */
}