img (позиция: абсолютная) в контейнере (позиция: относительная) не находится в центре

Question

Моя цель состоит в том, чтобы моя электронная почта была расположена в центре моей страницы. Я дал <div class=section4>position: relative и мой #mailicon a position:absolute, чтобы получить значок внизу моего div. Это сработало, но теперь мой значок всегда попадает вправо и больше не сосредотачивается.

Как я могу центрировать его обратно к середине, сохраняя его в нижней части моего div? Кроме того, я создаю отзывчивый веб-сайт, сначала мобильный ... так что наиболее отзывчивое решение, тем лучше! :) спасибо !!

Вот мой HTML:

<div class="section section4"> 
     <img src="icons/ML-network.gif" alt="icon3"> 
     <h1>...</h1> 
     <p class="ultralight">...</p> 
     <a href="mailto:contact@magicledger.com"><img id="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a> 
</div> 

и CSS:

.section { 
    height: 100vh; 
    width: 100%; 
    text-align: center; 
} 
.section4 { 
    position: relative; 
} 
#mailicon { 
    width: 15%; 
    position: absolute; 
    bottom: 0; 
} 

Answer 1

Для изготовления center элемент с position: absolute вы должны установить left: 0; right: 0; margin: auto; так:

#mailicon { 
    width: 15%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

JSFiddle

или использовать translate:

#mailicon { 
    width: 15%; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%,0); 
} 

JSFiddle

Answer 2

Вы могли бы изменить код CSS для этого:

#mailicon { 
    width: 15%; 
    margin: auto; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
}