Icon inside absolute div not centering

Question

I am trying to build a div which can be shown at the left bottom of the screen. Below is the css.

1. The icon is not centring and
2. For mobile devices the div is showing in the center of the screen.

How to make the icon centered and how to contract the div for smaller devices ?

SCSS

.dot {
    position: fixed;
    right: 100px;
    bottom: 100px;
    width: 100px;
    height: 100px;
    background: #6fbd14;
    border-radius: 50%;
    text-align: center;
    vertical-align: bottom;

    a {
        i {
            font-size: 80px;
            color: #cfcfcf;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);

            &:hover,
            &:focus {
                color: $main-color;
            }
        }
    }
}

HTML

<div class="dot">
    <a routerLink="/market/cs">
        <i class="ri-add-line"></i>
    </a>
</div>

Answer 1

Try this

for the anchor element

height:100%;
width:100%;
display:inline-flex;
justify-content:center;
align-items:center;

remove this from the i

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);

.dot {
  position: fixed;
  right: 100px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  background: #6fbd14;
  border-radius: 50%;
  text-align: center;
  vertical-align: bottom;
}
.dot a {
  height: 100%;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.dot a i {
  font-size: 80px;
  color: #cfcfcf;
}
.dot a i:hover, .dot a i:focus {
  color: green;
}

<div class="dot">
    <a routerLink="/market/cs">
    <i class="icon">I</i>
    </a>
</div>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>