Html 将图像居中并保持在底部

我在侧边栏底部保留图像时遇到问题。当我能够将其居中时，它希望加入更高的链接，并且不会下降，而当我将其强制到底部时，如果没有危险的边缘攻击，我就无法将其居中

.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。位置：绝对位置；根据需要将其置于底部，但向左浮动，位置：相对；根据需要将其置于中心，但从底部将其拉出。欢迎您的任何意见，谢谢。

试试这个，应该可以

.侧边栏{ 高度：100vh； 最大宽度：25%； 浮动：左； 字体系列：“Pontano Sans”，无衬线； 位置：固定； } .侧边栏li:nth-of-type1{ 垫面：10%； } .侧边栏李{ 颜色：8B2500； 边缘顶端：40px； 列表样式：无； 文本对齐：居中； 左边距：-35px； 字体大小：20px； } 加{ 底部：0； 显示：块； 保证金：0自动； 底部：0； 位置：绝对位置； 宽度：80px； 高度：80px； } .清楚{ 明确：两者皆有； }

---

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

CSS

---

查看我的示例

能否添加容器元素？这将防止您需要明确的大小或边距

.侧边栏{ 高度：80vh； 最大宽度：25%； 位置：固定； 背景：粉红色； 最小宽度：300px； 最小高度：150px； } .居中{ 位置：绝对位置； 底部：0； 左：0； 右：0； 文本对齐：居中； } 加{ 显示：块； 保证金：0自动； } 身体{ 填充：30px； }

---

虽然这可能会解决提问者提出的问题，但最好在代码中加入一些解释，以帮助未来的读者。好吧，现在已经太晚了。祝你好运，圣诞先生

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

.COOLelement{ 
    position:fixed; 
    margin:0 auto; 
    bottom:0;
    width: 100px; 
    height: 10px; 
}