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

Question

我的目标是让我的邮件图标位于页面底部的中央。我给了我的 <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; 
}

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;
}

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

img (position: absolute) in container (position: relative) doesnt center

html

css

center

css-position

vertical-alignment