Unable to position my element to the center of page-CodePudding

I'm not able to position the dot to the center of the page, does anyone know why? Thanks.

This is my code:

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

<span </span>

CodePudding user response：

height: 10px;
width: 10px;
background: red;
color: red;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

add code position: absolute