Центрирование картинки в header, и работа с bootstrap?

Вот так например:

HTML:

<h1 class="text-center">Center Navbar Brand</h1>

<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
              <a class="navbar-brand" href="http://example.com"><img src="https://miro.medium.com/max/320/0*_rAD9NgK7l6KSlNc.png" alt="Example center logo">
      </a>
      </div>
      

      
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS:

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
  padding: 7px 14px;
}

Результат:

https://pasteboard.co/JFkVzTW.jpg

.navbar-brand {

   transform: translateX(-50%); - ??? зачем мы его сдвигаем и двигаем обратно?

   left: 50%; 

  position: absolute; - родительский класс (ссылка <a>) становится абсолютным и расчет отступов от него происходит для картинки. Верно?

  padding: 0px; - показывает что нет отступов у ссылки?

}