根据div居中图标并在div之间放置空间

Question

我对网页设计问题（html，css等）有点新意，并试图做出类似这样的事情：

我不知道如何使fa-envelope-o图标水平和垂直居中。我试过这样的事情：

#envelopeDiv{
    background-color: red;
    width:62px;
    height:42px;
    line-height:42px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}

#disableAllDiv .big-icon{
    font-size: 25px;
    line-height: inherit;
}

#disableAllDiv{
    background-color: #4caf50;
}

#disableAllButton{
    margin-top: 10px;
    margin-bottom: 10px;
}

它没有给我正确的结果。有人可以提供示例代码或更专业的方法吗？ 即使“如何研究”也非常有用。

Answer 1

正如@Michael_B在上面的评论中所说，flexbox可能是最现代化的方式。

使用margin: auto可以轻松完成水平居中，但vertical-align更加困难，因此我会发布非CSS方法。

但是，我（用我自己奇怪的方式）喜欢用JS（和jQuery）直接进行此操作：将其left和top设置为width的一半，以绝对定位为中心容器的1}}和height（分别）减去图像的width和height的一半，动态。

$("img").css({
  "top": $("div").height() / 2 - $("img").height() / 2,
  "left": $("div").width() / 2 - $("img").width() / 2,
	"position": "absolute"
});

div {
  width: 500px;
  height: 500px;
  background-color: #aaf;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://images.clipartpanda.com/envelope-with-letter-clipart-envelope-md.png" />
</div>

在JSFiddle.net上查看working example。

修改

现在我想一想，如果你知道容器和图像的高度和宽度是多少，那么只需在容器上设置一定的填充就可以轻松实现。

请参阅JSFiddle.net上的this example。