居中图像并将其保留在底部

Question

我在将图像保留在侧边栏底部时遇到问题。当我能够将其居中时，它想要加入较高的链接并且不会下降，而当我将其强制到底部时，我无法在没有危险的边距黑客的情况下使其居中。

.sidebar {
  height: 100vh;
  max-width: 25%;
  float: left;
  font-family: 'Pontano Sans', sans-serif;
  position: fixed;
 }

  .sidebar li:nth-of-type(1) {
        padding-top: 10%;
      }


.sidebar li {
  color: #8B2500;
  margin-top: 40px;
  list-style: none;
  text-align: center;
  margin-left: -35px;
  font-size: 20px;
}
  #add {
    display: block;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    width: 80px;
    height: 80px;
  }

html：

<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <img id="add" src="images/phoner.png"></img>
        </nav>

有问题的图像是#add。位置：绝对；根据需要将其带到底部，但向左浮动，位置：相对；根据需要将其置于中心，但将其从底部拉出。任何意见表示赞赏，谢谢。

Answer 1

当您使用position:absolute时，您已经快到了，将positiong元素放在中心的技巧是通过添加左、上、右、下50%并减去要居中的元素大小的一半。在你的情况下你只需要

CSS

#add {
    display: block; // remove
    margin: 0 auto; // remove
    bottom: 0;
    left: 50%; //added
    margin-left: -40px; //added
    position: absolute;
    width: 80px;
    height: 80px;
  }

看我的小提琴样本