HTML盒子上的图片怎么让它达到我想要的标准?

HTML中设置盒子在盒子上添加了图片，但是怎么让图片居中并且设置它的水平和垂直边距，达到我想要的结果呢？求求大佬帮帮我


div{
 
　　width:200px;
 
　　height:200px;
 
　　border:1pxsolid#ccc;
 
　　position:relative;//父元素设置绝对定位
 
　　}
 
　　img{
 
　　position:absolute;//相对定位
 
　　width:80px;
 
　　height:50px;
 
　　top:0;
 
　　left:0;
 
　　right:0;
 
　　bottom:0;
 
　　margin:auto;//使其垂直居中
 
　　}
    <div>
 
　　<imgsrc="images/1.jpg">
 
　　</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
        
        </script>
        <title></title>
    </head>
    <style type="text/css">
        .aaa{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 400px;
            height: 400px;
            background: skyblue;
        }
        .aaa img{
            width: 200px;
            height: 200px;
        }
    </style>
    <body>
        <div id="" class="aaa">
            <img src="../HelloHBuilder/img/HBuilder.png"/>
        </div>
    </body>
</html>

img

在实际开发中，使用flex布局更好用