Centering a vector image in the web page

By using CSS we can center the image horizontally and vertically in our web page

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </script>
        <title>Crumbs - Center Image</title>
        <style>
            body {
                font-size:12px;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
            }
            object embed {
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
        <script>
            $(document).ready(function(){
                var avatar = {
                    init: function(x, y) {
                        var svg = "<object><embed src='simple.png'/></object>";
                        $("#obj_wrapper").append(svg);
                    }
                }
                avatar.init();
            });
        </script>
    </head>
    <body>
        <div id="obj_wrapper" />
    </body>
</html>

Snippets CSS HTML Center