How to make active route link scroll to center in Angular?

In Angular, I have a Navbar, in which I have scrollable menu links. The links will start from the center.
What I’m trying to do is, that I want the active link to be scrolled to the center when I click on it. but I’m unable to do it. How can I achieve it? And FYI – whenever I click on links the page will reload.

Below is image –

Below is my code-

Html

<div class="menu-links-container">
    <ul class="navbar-nav ms-auto me-auto mb-lg-0">
        <li class="nav-item">
            <a class="nav-link" routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page"
                id="home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="/about" routerLinkActive="active" ariaCurrentWhenActive="page"
                id="about">About Me</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="/contact" routerLinkActive="active" ariaCurrentWhenActive="page"
                id="contact">Contact Me</a>
        </li>
    </ul>
</div>

Css –

 .menu-links-container {
    order: 3;
    overflow: hidden;
    width: 100%;
    .navbar-nav {
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0% 30%;
      gap: 20px;
      align-items: center;
      scroll-behavior: smooth;
      .nav-link {
        white-space: nowrap;
        transition: color 0.3s, background-color 0.3s;
      }
    }
  }