Center image and keep it at bottom - html

Question

I'm having an issue with keeping an image at the bottom of my sidebar. When I'm able to center it, it wants to join the higher-up links and won't come down, and when I force it to the bottom, I can't get it to center without dangerous margin hacks.
.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;
}
The html :
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
The image in question is the #add. Position: absolute; brings it to the bottom as desired, but floats it left, and position: relative; brings it center as desired, but pulls it from the bottom. Any input appreciated, thanks.

Answer 1

You are nearly there, the trick in positiong element at the center, when you are using position: absolute is by adding a left,top,right,bottom a 50% and substract the half of the size of the element you want to center.
In your case you just need to
CSS
#add {
display: block; // remove
margin: 0 auto; // remove
bottom: 0;
left: 50%; //added
margin-left: -40px; //added
position: absolute;
width: 80px;
height: 80px;
}
see my sample fiddle

Answer 2

try this it should work
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<div class="clear"></div>
<img id="add" src="images/phoner.png"></img>
</nav>
.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 {
bottom: 0;
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
.clear{
clear: both;
}

Answer 3

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

Answer 4

Can you add a container element? That would prevent you from needing explicit sizing or margins.
.sidebar {
height: 80vh;
max-width: 25%;
position: fixed;
background: pink;
min-width: 300px;
min-height: 150px;
}
.stuck-centered {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
#add {
display: block;
margin: 0 auto;
}
body {
padding: 30px;
}
<nav class="sidebar">
<ul>
<li>About</li>
</ul>
<div class="stuck-centered">
<img id="add" src="http://placehold.it/80x80"></img>
</div>
</nav>
Full demo