Html 如何将方框中的图像精确对齐（垂直和水平）

在我的网页部分，我使用了一个图标库。我在div中插入一个图像/图标，并通过css管理对齐中心（垂直和水平）。但我发现我的图像垂直对齐中心，而不是我的div中的精确中心。请参阅我的代码和css

css

#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
align-items: flex-start;
}

#main div{
width: 70px;
height: 70px;
align-self: center;
background:red;
}

及

html

<div id="main">
  <div></div>
</div>

看我的

---

如何将我的图像在正文或div中精确居中对齐？

您可以使用

对齐项目：居中

和

对齐内容：居中

#主{
宽度：170px；
高度：300px；
边框：1px实心#C3C3；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#主要部门{
宽度：70px；
高度：70像素；
背景：红色；
}

---

您可以使用

对齐项目：中心

和

对齐内容：中心

#主{
宽度：170px；
高度：300px；
边框：1px实心#C3C3；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#主要部门{
宽度：70px；
高度：70像素；
背景：红色；
}

---

在您的代码中，需要进行一些小的更改以获得您想要的输出。即包括代码

margin:0 auto以及#main div css。然后css将如下所示

#main div{
    width: 70px;
    height: 70px;
    align-self: center;
    background:red;
  margin: 0 auto;/*Newly added one*/
}

我已经更新了您的JSFIDLE示例
 在您的代码中，需要进行一些小的更改以获得您想要的输出。即包括代码
margin:0 auto以及#main div css。然后css将如下所示

#main div{
    width: 70px;
    height: 70px;
    align-self: center;
    background:red;
  margin: 0 auto;/*Newly added one*/
}

我已经更新了您的JSFIDLE示例
 我喜欢用这个漂亮的小变换-转换技巧来居中

就你而言

   #main {
    width: 170px;
    height: 300px;
    border: 1px solid #c3c3c3;
    position: relative;
   }

    #main div {
     width: 70px;
     height: 70px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background:red;
    }

因此，在父元素上使用position:relative，在子元素上使用position:absolute。在绝对元素上，使用左：50%和上：50%以及transform:translate（-50%，-50%），所有内容都应该居中。
我喜欢使用这个漂亮的小变换-转换技巧来居中

就你而言

   #main {
    width: 170px;
    height: 300px;
    border: 1px solid #c3c3c3;
    position: relative;
   }

    #main div {
     width: 70px;
     height: 70px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background:red;
    }

因此，在父元素上使用position:relative，在子元素上使用position:absolute。在绝对元素上，使用左：50%和上：50%以及transform:translate（-50%，-50%），所有元素都应居中。
在图像中添加“边距：0自动”；如下所示：

#main div{
    margin: 0 auto;
    }

这里是小提琴：

-我希望这有助于将“边距：0自动”添加到您的图像中，如下所示：

#main div{
    margin: 0 auto;
    }

这里是小提琴：

-我希望这有帮助