Html 根据div对中图标并在div之间留出空间

我对网页设计问题（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;
}

---

它没有给我正确的结果。谁能提供示例代码或更专业的方法即使是“如何研究”也会非常有用。

正如@Michael_B在上面的评论中所说，

flexbox

可能是最现代的方法

使用

margin:auto

可以轻松完成水平居中，但是

垂直对齐

更难，因此我将发布一个非CSS方法

然而，我（用我自己奇怪的方式）喜欢用JS（和jQuery）直截了当地做这件事：通过将其

左

和

顶

设置为容器的

宽度和
高度的一半减去图像的
宽度和
高度的一半，以绝对位置将其居中，动态地


$（“img”）.css({
“顶部”：$（“div”）.height（）/2-$（“img”）.height（）/2，
“左”：$（“div”）.width（）/2-$（“img”）.width（）/2，
“位置”：“绝对”
});
div{
宽度：500px；
高度：500px；
背景色：#aaf；
位置：相对位置；
}

请同时包含HTML。此外，一个工作演示（带有图像或占位符）也会很有帮助（例如，jsfiddle.net）。但是对于一个通用的居中解决方案（垂直和水平），这是最现代的技术：@Michael_B，谢谢。我将尝试flexbox并很快返回。