html - 居中图像并将其放在底部

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。position:absolute；根据需要将其置于底部，但将其向左浮动，position:relative；根据需要将其置于中心，但将其从底部拉出。感谢任何输入，谢谢。

Answer 1

你快到了，positiong 元素在中心的技巧，当你使用 position: absolute 是通过添加 left,top,right,bottom 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;
  }

查看我的示例 fiddle