YouTube克隆项目：侧边栏内容无法居中的CSS问题求助

我正在开发一个YouTube克隆项目，目标是让侧边栏内的内容居中显示，但当前配置的CSS无法实现该效果。

当前效果 #

相关代码 #

CSS代码 #

.sidebar {
  background-color: rgb(175, 146, 146);
  width: 100px;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  bottom: 0;
  left: 0;
  top: 72px;
  padding-top: 15px;
}

p {
  margin: 0;
  margin-bottom: 24px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
}

.home-img {
  width: 24px;
}

.home {
  width: 100%;
}

.explore-img {
  width: 24px;
}

.explore {
  width: 100%;
}

.subscriptions-img {
  width: 24px;
}

.subscriptions {
  width: 100%;
}

.originals-img {
  width: 24px;
}

.originals {
  width: 100%;
}

.youtube-music-img {
  width: 24px;
}

.youtube-music {
  width: 100%;
}

.library-img {
  width: 24px;
}

.library {
  width: 100%;
}

HTML代码 #

<div class="sidebar">
  <div class="home">
    <img class="home-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="hp">Home</p>
  </div>
  <div class="explore">
    <img class="explore-img" src=".https://dummyimage.com/20x20/000/fff" alt="">
    <p class="ep">Explore</p>
  </div>
  <div class="subscriptions">
    <img class="subscriptions-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="sp">Subsriptions</p>
  </div>
  <div class="originals">
    <img class="originals-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="op">Originals</p>
  </div>
  <div class="youtube-music">
    <img class="youtube-music-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="yp">Youtube Music</p>
  </div>
  <div class="library">
    <img class="library-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="lp">Library</p>
  </div>

</div>

预期效果 #

内容的提问来源于stack exchange，提问作者Debdwaipayan Biswas