组态图如何限制大小和位置

做的项目中用到了组态图，是一个json数据包，把他放到画布上的时候显示出组态图，但每次进入的时候组态图都是在画布的左上方，并且大小不是想要的，想让组态图在画布上居中对齐并且大小适中，该怎么做？

给这个元素设置宽高，然后让他水平垂直垂直都居中
我给你写了三种居中方法，每一段注释是一种方法，可以解开注释尝试
如有帮助，望采纳 ^.^ 谢谢啦

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    body{
        width: 400px;
        height: 400px;
        border: 1px solid;        
        position: relative;

        /* 第一种*/
        display: flex;
        justify-content: center;
        align-items: center; 
       /* 第一种结束*/
    }
    .logo{
        width: 100px;
        height: 100px;
        
        /* 第二种
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto; */
        
        /* 第三种
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); */
        
    }
    </style>
    <body>
        <div class="main">
            <img class="logo" src="https://img0.baidu.com/it/u=2201225864,2449795080&fm=26&fmt=auto"/>
        </div>
    </body>
</html>