Html 在DIV内居中显示图像Y和X

如何将图像居中，使其位于DIV的完整中心

#box
{
border: 1px solid;
margin: 0px 10px 0px 0px;
width: 250px;
height: 200px;
border-radius: 35px; 
-webkit-border-radius: 35px; 
-moz-border-radius: 35px; 
border: 1px solid #E8E8E8;
display:inline-block;
}

<div id="box">
<img src="cleaning1.jpg" height="150px" width="200px">
</div>

#框
{
边框：1px实心；
保证金：0px 10px 0px 0px；
宽度：250px；
高度：200px；
边界半径：35px；
-webkit边界半径：35px；
-moz边界半径：35px；
边框：1px实心#E8E8E8；
显示：内联块；
}

您可以将图像的默认显示类型更改为

内联块

，并在

内联块

旁边创建一个全高伪元素

然后通过

vertical align:middle垂直对齐内联元素并使用
文本对齐：居中将图像居中#框的code>

此外，内联（-block）元素之间会有一个空格字符，您必须将其删除。你可以参考做那件事

给你：

#框{
/*这里还有其他款式*/
文本对齐：居中；/*水平对齐内嵌（-block）元素*/
font:0/0 a；/*删除内联（-block）元素之间的间隙*/
}
#框：在{/*之后创建一个全高内联块pseudo=元素*/
内容：''；
显示：内联块；
垂直对齐：中间；/*内联元素的垂直对齐*/
身高：100%；
}
#盒式img{
显示：内联块；
垂直对齐：中间；/*内联元素的垂直对齐*/
}


有关更多详细信息，请参阅使用



注意：我将图像包装在div中，而不是简单地为图像赋予style属性
margin:auto
，因为我注意到在某些情况下，图像宽度/高度参数在其他情况下不受尊重
 为了在垂直和水平中心对齐未知尺寸的图像，您可以参考。图像大小会改变吗？@HashemQolami我累了，但无法使其工作谢谢。我没有这样做，这就是为什么它不起作用的原因。哈希姆，我的txt没有出现在box div中有什么原因吗？我的计划是将图像居中，然后在上面写字。但是如果我把它放进去，就不会显示任何文本。如果这是你想要的，那么使用我的解决方案，因为文本会浮在上面。这是一种比添加不必要的元素和css代码更好的解决问题的方法，css代码实际上不需要在那里。@user3354493
我的计划是将图像居中，然后在上面写下
，您应该在问题中注意这一点。在这种情况下，最好按照PellePenna的建议将图像用作背景图像。如果要垂直/水平对齐文本中心，可以按照第一节中的说明进行操作。我用了一个图案作为DIV的背景，但我想我可以不用它。
<div id="box" style = 'display:flex'>
    <div style = 'margin:auto'>
       <img src="cleaning1.jpg" height="150px" width="200px">
    </div>
</div>