Why doesn't a centered element get centered?

Question

css

HTML:

<label class="label">
  <span class="label-span label-span-selected"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>

CSS:

.label{
  margin: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: #fff;
  border-radius: 50%;
}
.label-span{
  display: block;
  width: 16px;
  height: 16px;
  background-color: #777;
  border-radius: 50%;
}
.label-span-selected{
  background-color: #333;
}

When I zoom in on the page (CRTL+), the label-span becomes crooked in the browser (at different scales): 100%


125%


175%



It doesn't look like I would like, but I think I wrote everything correctly. How to avoid this situation?

Answer 1

At 175% scale, the parent becomes 35px, the child 28px.
How would you like it to be drawn exactly in the center of the parent?
You can try to replace centering with flex with absolute with transform.
But it is better to get rid of span'a. Why 2 tags, if all this is solved by one tag. And just border
https://jsfiddle.net/uqfpbx1w/