Unable to position my element to the center of page

user_19790022 0
Viewed 27

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 class="dot"</span>

css html
2 Answers

search up positioning in css, and learn all about it. Put the code position: absolute;

user_196951950 
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

user_189046290
Related