无法将dot元素定位至页面居中，寻求技术解决方案

问题原因 #

你的.dot元素设置了display: inline-block，默认是静态定位（static），这种定位模式下top、left这类偏移属性完全不生效，所以后续的transform: translate(-50%,-50%)也无法配合实现居中效果。另外你的HTML代码存在语法错误：<span class="dot"</span>缺少闭合的>，正确写法是<span class="dot"></span>。

解决方案 #

这里提供几种可行的实现方式：

方式一：绝对定位 + transform #

给.dot设置绝对定位，同时确保根元素（html/body）占满整个视口：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距 */
}
.dot{
  height: 10px;
  width: 10px;
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute; /* 改为绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<span class="dot"></span>

方式二：Flex布局（推荐） #

利用body的flex布局直接实现居中，无需给dot设置定位：

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.dot{
  height: 10px;
  width: 10px;
  background: #FFFFFF;
  border-radius: 50%;
}

<span class="dot"></span>

方式三：固定定位（相对于视口） #

如果需要元素始终固定在视口中心，可使用固定定位：

.dot{
  height: 10px;
  width: 10px;
  background: #FFFFFF;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<span class="dot"></span>

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