容器中的img（位置：绝对）（位置：相对）不居中答案

【问题标题】：img (position: absolute) in container (position: relative) doesnt center容器中的img（位置：绝对）（位置：相对）不居中
【发布时间】：2016-07-23 13:48:23
【问题描述】：

我的目标是让我的邮件图标位于页面底部的中心。我给了我的<div class=section4> 一个position: relative 和我的#mailicon 一个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; 
}

【问题讨论】：

标签： html css css-position center vertical-alignment

【解决方案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

【讨论】：

太棒了！效果很好！从响应的角度来看，有没有特别好的？或者他们都以同样的方式工作？谢谢！
欢迎您，两者的响应方式相同，但我建议第一种方法，因为它适用于旧浏览器，某些浏览器不支持translate。

【解决方案2】：

您可能可以将您的 css 代码更改为：

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

【讨论】：